Cjuitabs, Open A Tab Using Jquery/javascript

Yii 1.1 General Discussion
1

Hello there,

I am trying to open a tab in CJuiTabs using jquery/javascript.

I can see the tab ID like #jw5_tab_2.

I would open a certain tab with refreshing the page using jquery/javascript, but I need to open a certain tab without refreshing.

i.e. there are 3 tabs (A, B, C)

  1. click a checkbox

  2. validate something and if the validate returns false, it needs to open ‘B’ tab

Could someone give me an idea how I can open a tab using jquery/javascript without refreshing a page.

Thanks,

Jae

2

I found a way but not sure if there is easier way.

simply added/removed class.

$(’#yw5 .ui-tabs-selected’).removeClass(‘ui-state-active’);

$(’#yw5 .ui-tabs-selected’).removeClass(‘ui-tabs-selected’);

$(’#yw5 .ui-tabs-panel’).each(function(){

$(this).addClass('ui-tabs-hide');

});

$(’#yw5 li:nth-child(3)’).addClass(‘ui-state-active’);

$(’#yw5 li:nth-child(3)’).addClass(‘ui-tabs-selected’);

$(’#yw5_tab_2’).removeClass(‘ui-tabs-hide’);

3

In the latest version, you can do it like this if you assign a known id to the tab:


jQuery('#$tabsId').tabs("option","active",jQuery("#$tabsId a[href*='#$tabToSelectId']").parent().index());
4

I do :P :

function hideTab(idTab) {


    $("#" + idTab).hide();


    $("#" + idTab).removeClass("ui-tabs-anchor");


}





function showTab(idTab) {


    $("#" + idTab).show();


    $("#" + idTab).addClass("ui-tabs-anchor");


}





function validateCheck() {


    if ($("#IdCheck").is(":checked")) {





        hideTab('ui-id-1');


        hideTab('ui-id-2');





        showTab('ui-id-3');


        showTab('ui-id-4');





        $("#ui-id-3").click();//for change visible tab





    } else {


        showTab('ui-id-1');


        showTab('ui-id-2');





        hideTab('ui-id-3');


        hideTab('ui-id-4');





        $("#ui-id-1").click();





    }


}