1

タブを非同期的にJqueryAJAXタブを使用してロードしています。タブがクリックされたときに一度だけロードしたいのですが、クリックするたびにタブがロードされるため、ポストバックが発生するため、ユーザーの選択がリセットされます。タブがリロードされないようにするにはどうすればよいですか？ 

       <div id="tabs">
            <ul>
                <li><a id="a" href="xyz.aspx">a</a> </li>
                <li><a id="b" href="abc.aspx">b</a> </li>
                <li><a id="c" href="">c</a> </li>
                <li><a id="d" href="">d</a> </li>
            </ul>
        </div>


 $(function () {
            $("#tabs").tabs({
                beforeLoad: function (event, ui) {
                    ui.jqXHR.error(function () {
                        ui.panel.html("");

                    });
                   // ui.ajaxSettings.async = false;               //does not work

                }
                //cache:true           // does not help
            });
        });
4

2 に答える 2

1

私は .tabs には詳しくありませんが、あなたが言ったことを理解できたら、クリックされたときに一度だけロードするタブのセットがあるとしましょう

   <div class="tabs" data-href="loaded" id="1">
        <ul>
            <li><a id="a" href="xyz.aspx">a</a> </li>
            <li><a id="b" href="abc.aspx">b</a> </li>
            <li><a id="c" href="">c</a> </li>
            <li><a id="d" href="">d</a> </li>
        </ul>
    </div>

   <div class="tabs" data-href="loaded" id="2">
        <ul>
            <li><a id="aa" href="xyz.aspx">a</a> </li>
            <li><a id="bb" href="abc.aspx">b</a> </li>
            <li><a id="cc" href="">c</a> </li>
            <li><a id="dd" href="">d</a> </li>
        </ul>
    </div>

   <div class="tabs" data-href="loaded" id="3">
        <ul>
            <li><a id="aaa" href="xyz.aspx">a</a> </li>
            <li><a id="bbb" href="abc.aspx">b</a> </li>
            <li><a id="ccc" href="">c</a> </li>
            <li><a id="ddd" href="">d</a> </li>
        </ul>
    </div>

タブをクリックするたびにリクエストが検証および処理されるように、ドキュメントの準備ができたらクリック イベント ハンドラを割り当てます。

$(document).ready(function(){
   $('.tabs').click(function(){
     if($(this).attr('data-href') != 'loaded')
     {
        new tabRequest($(this).attr('id'));
     }
   })
})

これがリクエストです (サーバーサイドに何をロードするかを検証する場合に備えて、ID を渡します)。

function tabRequest(id){

        var request = $.ajax({
          url: "/fetch_tabs.php",
          type: "POST",
          data: {
                'tabID': id,
                },
          dataType: "json"
        })

        request.done(function(msg)
        {
            $('#'+id).attr('data-href', loaded);
            $('#'+id).html('msg'); 
        })

        request.fail(function(jqXHR, textStatus) {
            console.log(textStatus);
            console.log(jqXHR);
        })

        request.complete(function(){
            console.log("Ajax request complete!");
        })

}

これが役に立ったことを願っています:)

于 2013-01-22T11:10:14.660 に答える