Question

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

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

<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>

Answer 1

我在IE和Firefox中都尝试了一个测试代码，它看起来工作得很好。

的test.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>

Department.html：

             This is my department page.

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

希望这会有所帮助。如果没有，请告诉我。

Answer 2

更改您的选择功能以设置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到本地文件系统将生成错误。

Answer 3

$( "#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();
            }

        }
    });

使用Jquery Tabs通过ajax传递变量

3 个答案: