Selecting a newly added Jquery UI TAB

Selecting a newly added Jquery UI TAB

Hi All,

I am having an issue, I have a basic tab layout then I add a tab and when trying to select the newly added tab I am getting a ui.panel is undefined.

My code is as follows.

Tab definition,

  1.                 /*
                     * Initialise the Tabs                

  2.                  */

  3.                  var $tabs = $("#tabs").tabs(
                     {
                         ajaxOptions: {
                            error: function(xhr, status, index, anchor) {
                                $(anchor.hash).html("Couldn't load this tab.");
                            },
                            data: {},
                            success: function(data, textStatus) {
                            }

                         },//end of ajaxOptions
                         cache: true,
                         add: function(event, ui) {
                             $tabs.tabs('select', '#' + ui.panel.id);
                         }

                     });
















Add the tab code in

  1.         $('#tabs').tabs("add",'/new.php','New Tab Name');
The tab is getting added no problem but just getting the "ui.panel is undefined" as it adds and the tab is not selected.

Any help or direction would be greatly appreciated as I have been scratching my head for a while on this one.

Thanks!