Question

I’m using jquery-ui tab example to add extra tabs. I changed that code to be able to add tabs that load a form via Ajax. I was able to create that just changing these:

var $tabs = $( "#tabs").tabs({
    cache: true,
    tabTemplate: "<li><a href='formularioAgricola.php' id='#{label}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>"
    //ajaxOptions: a        
});

So I changed the tabTemplate to load the same Form always.

My problem is that I’m not sure how to retrieve, either to tell that every tag from that form use jquery-ui stuff, like buttons, datepickers, etc.

In a regular form I would do something like:

$("#btnRevisar").button()

But when we talk about form load via Ajax it is different.

and also, how can I try to differ one form from other one, if they are all named with the same name, is it possible?

Thanks guys

Carlos.

Answer 1

Within the tabs docs page, tab titled “Events” there is a “load” event. The “ui” argument gives you access to an object that includes the current panel that is loaded. If you are using same ID on forms, beware that ID’s must be unique in a page.

var $tabs = $( "#tabs").tabs({
    cache: true,
    tabTemplate: "<li><a href='formularioAgricola.php' id='#{label}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",

    /* add new option for load event*/

    load: function( event, ui){
        var $currTabContentPanel=$(ui.panel);
        /* only look in currently loaded content for formClass*/
        $currTabContentPanel.find('.formClass').doSomething()

    }

});