CODEWITHSUNDEEP
jqueryjquery-ui
Ulhas Tuscano
Ulhas Tuscano

Reputation: 5620

Handle jquery Ajax tabs from loading once contents are loaded

I am loading tabs Asynchronously using Jquery AJAX tabs i want to load a tab only once when it is clicked but, it loads the tab on every click which causes postback hence resets user's selection. How do i prevent a tab from reloading? 

       <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
            });
        });

Upvotes: 1

Views: 758

Answers (2)

Deepanshu Jain
Deepanshu Jain

Reputation: 558

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

});

Upvotes: 0

0x_Anakin
0x_Anakin

Reputation: 3269

I'm not familiar with .tabs but if I understood what you said let's say you have a set of tabs that you want them to load only once when they get clicked

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

Assign click eventhandler when document is ready so that whenever you click a tab a request is validated and processed.

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

And this is the request.(We pass the id in case you want to validate what to load serverside) 

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

}

Hope this helped :)

Upvotes: 1

Related Questions