2

何日も立ち往生している問題があり、それを理解できないようです。Jquery Tabs を使用して AJAX 経由で変数を渡そうとしています。

これが私の使用シナリオです。ユーザーはJQueryタブを含むページをロードします。デフォルトはテキストだけです。ページには、ユーザー ID を含むセッション変数があります。2 番目のタブをクリックすると、そのユーザー 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

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.

于 2012-09-29T02:08:47.300 に答える
0

select 関数を変更して、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 を定義すると、後続のリクエストにこの値が使用されます。しかし、何らかの理由で現在の値を取得していません。選択時に 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 に答える