Question

I have group of jQuery Tabs that are created dynamically. Each tab has an iFrame with it. Here is a stripped down version of the code:

$tabs = $('#myTabs').tabs({
    tabTemplate: '<li class="myTabClass"><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
    add: function (event, ui) {
      $(ui.tab.hash).append('<iframe src="BlankTabHTML.htm" id="tabFrame' + GLOBALTabIndex + '" class="tabIFrames" frameBorder="no"></iframe>');
    },
    remove: function (event, ui) {
      GLOBALTabIndex --;
    }
  });

My problem is this: When a user clicks the ‘x’ to remove a tab, the tab and iFrame are removed but onbeforeunload isn’t fired.

I to unload the iframe by setting the frame to a dummy page, then find out if the user clicks “ok” or “cancel” on the onbeforeunload dialog so I know if the tab should be closed.

If they click cancel I need to cancel the tab removal. I have looked through jQuery’s documentation and can’t seem to find a way to cancel the tab removal once it is called. I know this is really a couple questions in one, any ideas?

Answer 1

Don’t call tab().remove() directly by clicking on the span.

Just remove the iframe as you said(changing the src).

First onbeforeunload will fire. Later, if the user chooses “yes”, onunload will fire, where you can remove the tab too.(There is no way to determine directly, what the user chooses in beforeunload, you have to observe unload, it’s clear that the user chooses “yes” if onunload fires)