CODEWITHSUNDEEP
jquery-uijqueryjquery-selectors
simbu94
simbu94

Reputation: 1012

JQuery Tabs Loading with Ajax for first time alone

I am loading the data in jquery tabs using ajax based on the combobox selection it's working fine for first time ,the data are loading properly if i change the combobox selection at that time the first tabs becomes empty if i switch to second tab and came for first tab then the data is loading fine.I don't know why it's not loading while changing the combox selection in first tab.

In the below example i am checking the condition like "Value L" ,if it's "L" then i need to show the three tabs,If the value is not "L" then i need to show the two tabs.

While the two tabs are displaying at that time the first tab data is not loading.

 $(function() {
     $("#contractType").change(function(){                          

            if($("#contractType").val()=="L") //Combo Selection Values
                {                       
                    $("#hidetab").show();//Loading tabs
                    $("#tabs-0").show();
                    $("#dispEmp").removeClass('ui-tabs-selected ui-state-active');

                }//if

            else
                {
                    $("#hidetab").hide();
                    $("#tabs-0").hide();//Hides the first tab                       
                    $("#tabs-1").show();/*Displays remaining two tabs below*/
                    $("#tabs-2").show();
                    $("#dispEmp").addClass('ui-tabs-selected ui-state-active');
                    $("#jqgrid").show();//Here i am trying to load the data in second tab using ajax call.
                    $("#dispEquip").removeClass('ui-tabs-selected ui-state-active');

                }

     });         

 });

Upvotes: 1

Views: 686

Answers (1)

simbu94
simbu94

Reputation: 1012

I got the answer and it's working fine now.

While i am changing the combobox at that time based on the condition i am making the tab as selected.

$( "#yourtabId" ).tabs( "option", "selected", 0 );//this code will select the index of the tab as selected.

0->Index of the tab.

While selecting the tab if we need to return the tab index value then this function will get invoked.

$('#yourtabId').tabs({
            select: function(event, ui) {

            ui.index // Will return the selected index of the tabs.
          }
        });

Upvotes: 1

Related Questions