Passing variable via ajax with Jquery Tabs

问题

I am having a problem that I've been stuck on for days, and I just cant seem to figure it out. I'm trying to pass a variable through AJAX using Jquery Tabs.

Here is my use scenario: User loads page with JQuery tabs, default just being some text. On the page, I have a session variable containing there userid. When they click the 2nd tab, it passes that userid variable to the script. I can't get it to pass!

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

回答1:

I tried a test code in both IE and Firefox and it seems to be working completely fine.

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.

I made changes in first two lines(variable declaration: modified postData and added one new variable to hold userid value). Modified the function assigned to "select". This seems to be working as I was able to verify the userid through an alert in "error" function of ajaxOptions.

Hope this helps. If not, please let me know.

回答2:

Change your select function to set the 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.");
        }
    })
},

When you define ajaxOptions initially it uses this value for any subsequent request. But for some reason its not getting the current value. I even tried changing just the userId on select and it failed to modify it. They may be cloning the value, im not sure. Anyway if you set ajaxOptions before the request, it will send what you want.

Sorry for the half baked answer, but I couldn't let it go. +1 on the question. I had to do a little research to figure out why it wasn't working.

Note: You probably already know this, but you must be running on a server to POST. POST to the local file system will generate an error.

来源：https://stackoverflow.com/questions/12649062/passing-variable-via-ajax-with-jquery-tabs

标签

jquery

jquery-ui

jquery-tabs