2

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
    }
Radoslav Trenev
  • 353
  • 1
  • 6
  • 17
  • http://api.jqueryui.com/tabs/#method-load `"#5"` isn't an index, it's an ID. that method wants an index. – Kevin B Jan 26 '15 at 22:43
  • Also note that it seems as if you will in this case be "loading" the tab before it exists. You will also refresh it before it exists. – Kevin B Jan 26 '15 at 22:45
  • I see. But how do i find the last created tab's index? – Radoslav Trenev Jan 26 '15 at 23:08
  • It will be the index of the li within the ul that contains the tabs. however, since you're appending, it's safe to assume that the index is also equal to the number of tabs minus 1. – Kevin B Jan 26 '15 at 23:09
  • Makes sense. Let me try that, brb – Radoslav Trenev Jan 26 '15 at 23:10
  • The tabindex thing is not working even if i set it manually. `var lasttab = tabs.find('li').length-1; tabs.tabs("load", lasttab);` this is what i'm using to find it with code but even if i set it to 0, 1, 2, 3 or whatever it's not working – Radoslav Trenev Jan 26 '15 at 23:25
  • [link](api.jqueryui.com/tabs/#method-load)[link] says `The href of the tab to load.`, and since i set my href to `href='#"+id+"'` wouldn't it be correct to use `$("#tabs").tabs("load", "#"+id);` – Radoslav Trenev Jan 27 '15 at 00:12

2 Answers2

2

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.

Nikhil VJ
  • 5,630
  • 7
  • 34
  • 55
0

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

    }
enigma969
  • 397
  • 6
  • 21