views:

92

answers:

0

I am trying to use jquerys ajax loaded tabs, along with other ui plugins such as accordion and dialog box. Everything will load fine via $(document).ready function, but if I try to use any of the methods after initial loading, the methods fail. But if I take out the snippet that loads the tabs, they work. So I think the problem is how I am calling tabs. Here is the code.

$(document).ready(function(){ 

    $('#accordion').accordion({alwaysOpen:true, });

    $('#tester').click(function(event) {
        $('#accordion').accordion( 'activate' , 1 );
        $('#dialog').dialog();
     }); 

    var $tabs = $("#example").tabs().bind('tabsload', function(event, ui) {
        var selected = $tabs.tabs('option', 'selected'); // => 0
        if(selected==0){
            bindBehaviors(this);
        }
    });
});

So, if I take out the block starting with "var $tabs", clicking on div id="tester" will open the dialog box, and set the accordion tab id =1 to active, otherwise, it will not work. Also, methods like .accordion("destroy") don't work unless tabs is taken out.

note: the bindBehaviors function binds all of my click events associated with the first tab, when the first tab loads. These events bind correctly.

Any help as to why calling tabs is interfering with other ui methods would be great. Is there another way I should be calling my ajax loaded tabs? Hope the question is clear.