Question

I am using the jquery dialog widget to display a modal box. However when pressing F5, while the modal is open no refresh happens. Any idea?

Interesting Update:

Try this demo: http://jqueryui.com/demos/dialog/#modal-message
Now when the focus is on the “ok” button, then the refresh (F5) works, however when the button does not have the focus, then it doesn’t.

Update 2

We can actually just add any kind of control to the dialog, set the height and width to 0 css and set the focus on it to get the refresh working. This is not the best solution though. I am still trying to get keypress working.

Update 3

The following seems to work for now:

$(document).keydown(function(e)
{
    if (e.which == 116) // key code of the F5 button
    {
        document.location.reload();
     }
}); 

Answer 1

This seems to be a common problem and I have not seen a satisfactory answer. There’s a few similar questions on Stack Overflow and the best answer I’ve seen is to capture the keys and trigger the action yourself (this was for enter triggering a button, so f5 to refresh might be harder) I’ve seen it myself in a project I’m working on too.

I suspect that setting modal to false could help, but I have not tried it yet.

Edit:

I found this on line 539 of ui.dialog.js:

events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),

Removing the keydown and keypress from there seemed to allow normal browser keys to work. Now mine looks like this:

events: $.map('focus,mousedown,mouseup,click'.split(','),

I don’t know what functionality I would have removed by doing this. The only place events seem to be used is on line 549:

$(document).bind($.ui.dialog.overlay.events, function(event) {
    var dialogZ = $(event.target).parents('.ui-dialog').css('zIndex') || 0;
    return (dialogZ > $.ui.dialog.overlay.maxZ);
});

It would be nice to get this fixed in the official version if possible.