Question

我正在使用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
            });
        });

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

在文档准备就绪时分配click eventhandler，这样无论何时单击选项卡，都会验证并处理请求。

$(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!");
        })

}

希望这有助于：）

Answer 2

$(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.");
        });
    }
});

}）;

加载内容后处理jquery Ajax选项卡

2 个答案: