How to completely stop the jQuery UI dialog from opening if the tab is shifted?

Question

Hi,

I want to open a jQuery UI dialog box (whose content is loaded via ajax) within a jQuery UI tab.

Scenario:

I have two tabs in the page. If I click on the overlay link (for the modal dialog) in one tab, and during the loading of the dialog (which is not yet visible - an ajax call is happening), I click on the other tab, I want the tab to shift, and the overlay from tab 1 to be removed. At present, it is getting loaded into tab 2.

How to stop the old dialog from tab 1 showing up in tab 2?

dialog("close") & dialog("destroy") doent fix the issue.

Appreciate the quick response.

Thanks in advance.

Answer 1

So your dialog is not being shown until an ajax call is completed? Is that right?

If so you could check in the oncompleted function of your ajax call that tab 1 is still selected. If not, then don't show the dialog.

$.get("example.com/foo", null, function (data, status) {

    if ($(".tab1.ui-selected").length == 1) {
        // open the dialog
    } else {
        // do nothing.
    }


} );