1

我正在使用 Jquery AJAX 选项卡异步加载选项卡我只想在单击选项卡时加载一次选项卡，但是它会在每次单击时加载选项卡，这会导致回发，因此会重置用户的选择。如何防止标签重新加载？ 

       <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 回答
0 
$(function () {
$("#tabs").tabs({
    beforeLoad: function (event, ui) {
        if (ui.tab.data("loaded")) {
            event.preventDefault();
            return;
        }
        //ui.ajaxSettings.cache = false,
        ui.panel.html('<img src="images/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...'),
        ui.jqXHR.success(function() {
            ui.tab.data( "loaded", true );
        }),
        ui.jqXHR.error(function () {
            ui.panel.html(
            "Please Reload Page or Try Again Later.");
        });
    }
});

});

于 2017-03-27T12:00:48.737 回答