If dialog opens in one browser tab, prevent it from opening in another?

Question

I have a code that uses ajax to check if something is true so for example:

$.ajax({
  type: 'get',
  url: ACTION_URL
  dataType: 'json',
  success: function(result) {
    if (result && result.success) {
        $('#JQUERY_UI_DIALOG').dialog('open');
    }
  }
});

Now this ajax runs every few seconds. If user has multiple tabs open in browser of a same page or different page and dialog opens on one tab, it opens on all tabs.

If user closes or accepts on one tab's dialog, the other ones do not close so user has to go through all tabs and do it manually.

Is there a way I could make other tabs close that dialog if on at least on of the tabs it was closed? or do not even open it if it was opened on one tab.

You're going to have to use cookies to handle this one if you want it to span over multiple tabs. That'd be the easiest solution — Mark Pieszak - Trilon.io, Nov 19 '13 at 18:07
Don't return success to above ajax call except for very first time per user. — Murali Mopuru, Nov 19 '13 at 18:09

score 0 · Answer 1 · answered Nov 19 '13 at 18:32

It's probably best if you prevent the others from opening, since the closing thing would require you to make yet another request every couple seconds (or complicate the existing request). So basically, what you can do is save the state of the popup on the server on a per session basis. Let's say you already have something like

$.getJSON(ACTION_URL, function(result){
    if(result && result.success && !result.popupOpen){
        $.post(POPUP_URL, {open: true}, function(){
            $('#JQUERY_UI_DIALOG').dialog('open');
        });
    }
});

And then, on your server end, you can set the respective session variable to true, so that any incoming requests from other browsers will be aware of the result.success, but still know a popup has already been opened (popupOpen).

score 0 · Answer 2 · edited May 23 '17 at 11:59

Well, I've been wondering about a similar problem and got to a clue, so I wanted to share it here:

Javascript: sharing data between tabs

With that, you can completely leave out the server-side checks which reduces the number of AJAX calls, server load, delay (as AJAX requests are slower than local communication), and traffic.

Just make sure to make your tabs "detect" tabs that have gone away.
There is the beforeUnload event supported by most browsers, or you store a timestamp which is refreshed by the tab with the open popup every few seconds and checked by others.

If dialog opens in one browser tab, prevent it from opening in another?

2 Answers2