Search code examples
jqueryjquery-uijquery-ui-tabs

Jquery UI Tabs Load and select

I'm using JQuery UI Tabs. I'm navigating on a button click. I have 3 tabs. On button click the other two gets activated. Each tab is a separate jsp file integrated into a single jsp which have tabContainer.

tabNavigationLInk contains the links for jsp loading from controller.

on button click i have

  1.  $("#planningTabContainer").tabs().tabs({disabled: []});
  2.  $('#ui-tabs-2').load("/Plan"+tabNavigationLinks[1]);
  3.  $("#planningTabContainer").tabs("select", "#ui-tabs-2");

Now the problem is that if i Use the line 3 code, The call on load of JSP is happening twice. If i don't use the 3rd line code. The tab will get loaded but won't be selected.

Does any one has any solution for this. Selecting a tab without using the "select". So that the call won't happen twice.

Solution

  • I didn't quite resolved it but got around by making the "cache" property to true, so whenever i wanted to refresh the tab i'll use 

      $('#ui-tabs-2').load("/Plan"+tabNavigationLinks[1]);

    otherwise i'll use 

      $("#planningTabContainer").tabs("select", "#ui-tabs-2");

    Hope this help someone.