CODEWITHSUNDEEP
jqueryajaxjquery-uitabs
Vivek Dragon
Vivek Dragon

Reputation: 2248

Ajax loader in jquery Tabs

I am having a Jquery UI tabs in my page.

I like to show a loader similar to ajax loader while changing the tabs. I refered this question. But till now i dont have any clear idea for how to make this.

I have tried this in my script like this.

 <script>
$(function() {
$("#tabs").tabs({

    ajaxOptions: {

        error: function(xhr, status, index, anchor) {
            $(anchor.hash).html("I tried to load this, but couldn't. Try one of the other links?");
             var spinner = $( ".selector" ).tabs( "option", "spinner" );
             $( ".selector" ).tabs( "option", "spinner", 'Retrieving data...' );
        },
 spinner: '<img src="https://i.sstatic.net/Pi5r5.gif" />'


    }
});
});
</script>

How to make this in easy way. (I prefer not to use ajax method here.)

Like this image enter image description here

Upvotes: 3

Views: 4254

Answers (2)

Steve Snow
Steve Snow

Reputation: 61

I also was looking for a simpler way without ajax setup and stumbled on this post. Frans answer was almost correct but updating the wrong element. The corrected version should look like this, he was updating the actual tab and not the panel.

$("#tabs").tabs({
  beforeLoad: function( event, ui ) {
      ui.panel.html('<img src="https://i.sstatic.net/Pi5r5.gif" />');
  }
});

I just implemented works well.

Upvotes: 5

Fran Verona
Fran Verona

Reputation: 5476

One solution could be this:

$("#tabs").tabs({
   beforeLoad: function( event, ui ) {
      ui.tab.html('<img src="https://i.sstatic.net/Pi5r5.gif" />');
   }
});

Just rewrite html content of your tab with your desire loading gif. When the Ajax call is complete, tab content will be rewritten automatically.

More information: http://api.jqueryui.com/tabs/#event-beforeLoad

Upvotes: 0

Related Questions