Why "Prevent this page from creating additional dialogs" appears in the alert box?

Question

In my Rails 3 application I do:

render :js => "alert(\"Error!\\nEmpty message sent.\");" if ...

Sometimes, below this error message (in the same alert box) I see: "Prevent this page from creating additional dialogs" and a checkbox.

What does this mean ?

Is that possible not to display this additional text and checkbox ?

I use Firefox 4.

Margetts

The browser think that you js code has some bug and it is showing the message very frequently in some sort of loop and hence browser provide the option to user to disallow this alert box – Plainclothesman

Chrome show this from the second alert onwards regardless of the content or length of these alerts.. – Battle

@ShadowWizard As of today, it seems to be based on elapsed time since previous alert was closed. The timer is around a second or so. – Felike

@Dan yeah, probably they changed it over the years. :) – Battle

Answer 1

It's a browser feature to stop websites that show annoying alert boxes over and over again.

As a web developer, you can't disable it.

Angleaangler

Answer 2

What does this mean ?

This is a security measure on the browser's end to prevent a page from freezing the browser (or the current page) by showing modal (alert / confirm) messages in an infinite loop. See e.g. here for Firefox.

You can not turn this off. The only way around it is to use custom dialogs like JQuery UI's dialogs.

Wrasse

Just to add: from Firefox 4 onwards those alerts are not modal anymore, at least not to the window manager. You can easily navigate away to other tabs/windows nowadays. – Angleaangler

Answer 3

You can create a custom alert box using java script, below code will override default alert function

window.alert = function(message) { $(document.createElement('div'))
    .attr({
      title: 'Alert',
      'class': 'alert'
    })
    .html(message)
    .dialog({
      buttons: {
        OK: function() {
          $(this).dialog('close');
        }
      },
      close: function() {
        $(this).remove();
      },
      modal: true,
      resizable: false,
      width: 'auto'
    });
};

Misogynist

Can you show how to use this? Maybe add a little description of how to use and whats happening? – Harlin

Answer 4

This is a browser feature.

If you could, try to employ http://bootboxjs.com/, whit this library you can do the same of

alert("Empty message sent");

by writing:

bootbox.alert("Empty message sent", function(result) {
    // do something whit result
 });

You'll get a nice user interface too!

Mutism

Answer 5

Using JQuery UI's dialogs is not always a solution. As far as I know alert and confirm is the only way to stop the execution of a script at a certain point. As a workaround we can provide a mechanism to let the user know that an application needs to call alert and confirm. This can be done like this for example (where showError uses a jQuery dialog or some other means to communicate with the user):

var f_confirm;
function setConfirm() {
  f_confirm = confirm;
  confirm = function(s) {
    try {
      return f_confirm(s);
    } catch(e) {
      showError("Please do not check 'Prevent this page from creating additional dialogs'");
    }
    return false;
  };
};

Cavitation

"alert and confirm is the only way to stop the execution of a script at a certain point" - When you're thinking synchronously, that's true. However, these can use the jQueryUI controls to fire another method that then handles the result. – Interclavicle

It is true when you're thinking asynchronously as well. Using callbacks does not stop code executing in between. But as you say, passing in a callback function is a great way to control flow when using the jQuery dialogs. – Cavitation

Answer 6

I designed this function to hopefully circumvent the checkbox in my web apps.

It blocks all functionality on the page while executing (assuming fewer than three seconds has passed since the user closed the last dialog), but I prefer it to a recursive or setTimeout function since I don't have to code for the possibility of something else being clicked or triggered while waiting for the dialog to appear.

I require it most when displaying errors/prompts/confirms on reports that are already contained within Modalbox. I could add a div for additional dialogs, but that just seems too messy and unnecessary if built-in dialogs can be used.

Note that this would probably break if dom.successive_dialog_time_limit is changed to a value greater than 3, nor do I know if Chrome has the the same default as Firefox. But at least it's an option.

Also, if anyone can improve upon it, please do!

// note that these should not be in the global namespace
var dlgRslt,
    lastTimeDialogClosed = 0;

function dialog(msg) {
    var defaultValue,
        lenIsThree,
        type;

    while (lastTimeDialogClosed && new Date() - lastTimeDialogClosed < 3001) {
        // timer
    }

    lenIsThree = 3 === arguments.length;
    type = lenIsThree ? arguments[2] : (arguments[1] || alert);
    defaultValue = lenIsThree && type === prompt ? arguments[1] : '';

    // store result of confirm() or prompt()
    dlgRslt = type(msg, defaultValue);
    lastTimeDialogClosed = new Date();
} 

usage:

dialog('This is an alert.');

dialog( 'This is a prompt', prompt );
dialog('You entered ' + dlgRslt);

dialog( 'Is this a prompt?', 'maybe', prompt );
dialog('You entered ' + dlgRslt);

dialog( 'OK/Cancel?', confirm );
if (dlgRslt) {
    // code if true
}

Cohobate