CODEWITHSUNDEEP
jquerytabs
Radoslav Trenev
Radoslav Trenev

Reputation: 373

jQuery tabs "load" Method not working

I have a function, that runs an ajax request onClick and creates a new tab, containing loaded data. It works fine, but for better user experience i'm trying load the tab after the function is done, so the user doesn't have to to click on the newly created tab.

Here's the code:

function addTab(id, name, action) {
 var tabs = $( "#tabs" ).tabs();
 var tabTemplate = "<li style='max-height:32px;'><a href='#"+id+"'>"+name+"</a> <span class='ui-icon ui-icon-close' onclick='removeTab()' role='presentation'>Remove Tab</span></li>";
      tabs.find( ".ui-tabs-nav" ).append(tabTemplate);
       $.ajax({ 
        type: 'GET', 
        url: action+'?id='+id, 
        data: { get_param: 'value' },
        dataType: "text",
        success: function(data) {var j = $.parseJSON(data);
                      tabs.append(
                   //formatting json response
                      );
                    }

    });
      tabs.tabs( "refresh" );
     $("#tabs").tabs("load", "#"+id); //this thing is not working
    }

Upvotes: 2

Views: 1422

Answers (2)

Nikhil VJ
Nikhil VJ

Reputation: 6132

The load method doesn't work as advertised (I'm using v1.12.1)and IMHO needs to be removed from their docs. On the other hand, the initiating method does the job.

$( "#tabs" ).tabs({active: 1});

This switches to second tab. But seeing the docs and this answer, the below code may be the more proper way of doing it:

$( "#tabs" ).tabs( "option", "active", 1 );

Unfortunately in either of these ways we have to pass the index number of the tab and cannot use the id value that we had assigned to the tab, which was the key feature of "load", had it worked.

Upvotes: 2

enigma969
enigma969

Reputation: 427

This could be due to the async call of your ajax request. $("#tabs").tabs("load", "#"+id); will execute before the ajax response is sent. Put everything which is dependent on the response into the success function and it will work. In your case:

function addTab(id, name, action) {
 var tabs = $( "#tabs" ).tabs();
 var tabTemplate = "<li style='max-height:32px;'><a href='#"+id+"'>"+name+"</a> <span class='ui-icon ui-icon-close' onclick='removeTab()' role='presentation'>Remove Tab</span></li>";
      tabs.find( ".ui-tabs-nav" ).append(tabTemplate);
       $.ajax({ 
        type: 'GET', 
        url: action+'?id='+id, 
        data: { get_param: 'value' },
        dataType: "text",
        success: function(data) {var j = $.parseJSON(data);
                      tabs.append(
                   //formatting json response
                      );
                    }
      tabs.tabs( "refresh" );
     $("#tabs").tabs("load", "#"+id); //this thing is not working
    });

    }

Upvotes: 0

Related Questions