Passing variables with jquery ui tabs with select option

Question

I'm using tabs for an application that contains form elements on each of them. When the user navigates to a different tab, and the fields were modified, a hidden variable "IsDirty" is being set.

When I implement the beforeActivate event on tabs ... I do a check if any value has changed and set a hidden variable as "IsDirty", I do this in the beforeActivate as you have access to the Old and New tab, eg:

    beforeActivate: function (event, ui) {
        ...
        $panel_Old.find("input#hdIsDirty").val('0');
        $tabs.tabs('select', $tab_New.index());
        $panel_Old.find("input#hdIsDirty").val('1');
        ...
     },

I then implement the select event too eg:

     select: function (event, ui) {
         // other code here
     }

My question is ... in the beforeActivate event ... when I call

    $tabs.tabs('select', $tab_New.index());

can I pass some parameters eg ... previous tab ... that the select event would have as custom arguments?

Answer 1

The answer is no, you can't pass custom arguments to an event unless you modify the widget itself.

What you can do, if you wish, is set an attribute to the widget in your event, and then retrieve them later:

beforeActivate: function (event, ui) {
    ...

    $(this).attr('data-oldtab', $tab_Old.index()); // or whatever information you want

    $panel_Old.find("input#hdIsDirty").val('0');
    $tabs.tabs('select', $tab_New.index());
    $panel_Old.find("input#hdIsDirty").val('1');
    ...
 },

Then, when binding select:

 select: function (event, ui) {
     oldtabindex = $(this).data('oldtab');
     // other code here
 }

For more information on data() please read here.