2

我遇到了一个问题，我已经坚持了好几天了，我似乎无法弄清楚。我正在尝试使用 Jquery Tabs 通过 AJAX 传递变量。

这是我的使用场景：用户使用 JQuery 选项卡加载页面，默认只是一些文本。在页面上，我有一个包含用户 ID 的会话变量。当他们单击第二个选项卡时，它将该用户 ID 变量传递给脚本。我不能让它通过！

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.23.custom.min.js"></script>
<link rel="stylesheet" href="js/css/smoothness/jquery-ui-1.8.23.custom.css" />
<script>
var postData = {};
$("#tabs").tabs({
select: function(event, ui) {
    postData = {
        userid: parseInt($(ui.tab).data('userid'));
    };
},
ajaxOptions: {
    type: 'POST',
    data: postData,
    error: function(xhr, status, index, anchor) {
        $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo.");
    }
}
});
</script>

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Intro</a></li>
    <li><a href="Custom/div_charts_test2.html" data-userid="1234">Department</a></li>
</ul>
<div id="tabs-1">
    <p>Text information goes here</p>
</div>
</div>
4

3 回答 3

0

我在 IE 和 Firefox 中都尝试了测试代码，它似乎工作得很好。

测试.html

  <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>jQuery UI Example Page</title>
            <link type="text/css" href="css/smoothness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
            <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
    <script>
                var postData;
                var datavalue;
                $(function(){
                    $('#tabs').tabs(
                        {
                            select: function(event, ui) {
                                datavalue = parseInt($(ui.tab).data('userid')); 
                                postData = {
                                     userid:datavalue
                                };
                            },
                            ajaxOptions: {
                                type: 'POST',
                                data: postData,
                                dataType: 'html',
                                complete: function(xhr, status, index, anchor) {
                                    //alert(postData.userid);
                                },
                                error: function(xhr, status, index, anchor) {
                                    $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo.");
                                }
                            }
                        }
                    );
                });
    </script>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Intro</a></li>
                <li><a href="Department.html" data-userid="1234">Department</a></li>
            </ul>
            <div id="tabs-1">
                <p>Text information goes here</p>
            </div>
        </div>
    </body>
    </html>

部门.html：

             This is my department page.

我在前两行进行了更改（变量声明：修改了 postData 并添加了一个新变量来保存用户 ID 值）。修改了分配给“选择”的功能。这似乎有效，因为我能够通过 ajaxOptions 的“错误”功能中的警报来验证用户 ID。

希望这可以帮助。如果没有，请告诉我。

于 2012-09-29T02:08:47.300 回答
0

更改您的选择功能以设置 ajaxOptions。

select:function(event, ui) {
    $("#tabs").tabs("option", "ajaxOptions",{
        type: 'POST',
        data: {userId:$(ui.tab).data('userid')},
        error: function(xhr, status, index, anchor) {
            $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo.");
        }
    })
},

当您最初定义 ajaxOptions 时，它会将此值用于任何后续请求。但由于某种原因，它没有得到当前值。我什至尝试仅更改 select 上的 userId 并无法修改它。他们可能正在克隆价值，我不确定。无论如何，如果您在请求之前设置 ajaxOptions，它将发送您想要的内容。

对不起，半生不熟的答案，但我不能放手。+1关于这个问题。我不得不做一些研究来弄清楚为什么它不起作用。

注意：您可能已经知道这一点，但您必须在服务器上运行才能进行 POST。POST 到本地文件系统会产生错误。

于 2012-10-01T13:59:46.623 回答
0 
$( "#tabs" ).tabs({
        beforeLoad: function (event, ui) {

            ui.jqXHR.fail(function() {
                ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible."
                    );
            });

            var tabID = ui.tab[0].id;

            if (tabID == "tab1") {
                ui.ajaxSettings.url = 'ControllerName/Action/' + $('#drpDwnVal').val();
            }

            if (tabID == "tab2") {
                ui.ajaxSettings.url = 'ControllerName2/Action2/' + $('#drpDwnVal').val();
            }

        }
    });
于 2020-06-29T19:46:54.820 回答