Passing variable via ajax with Jquery Tabs

2019-07-14 01:46发布

站内问答 / jQuery
1231 2 4

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>

2条回答
smile是对你的礼貌
2楼-- · 2019-07-14 02:25

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.

查看更多
0人赞 添加讨论(0) 举报
傲
3楼-- · 2019-07-14 02:39

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)