Refresh (F5) not working in jQuery Dialog

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();
     }
}); 

Censure

I see the same issue on the demo site: jqueryui.com/demos/dialog/#modal – Repeat

I don't like your update 3. It's a workaround, but not a great one. JS mapping of non-alpha keys is notoriously bad for cross-browser, and there may be people or browsers who assign F5 for something else. It also does nothing for the other keys which UI blocks. I think this is a jQueryUI bug, and should be reported as such. The best fix would be to make UI stop catching these keys. – Repeat

I agree its not the best, however in our case, we are using only IE and FF for our company intranet. For that purpose it works. – Censure

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.

Idolize

It's only an issue on the demo site with the modal demo, though that's not really a fix. – Repeat

I am trying to use dlg1.bind('keypress', function(e) { ... }); however that doesnt seem to do anything. Any ideas? – Censure

I plan to take a look through the code and see if I can find a workaround soon since we are affected by the same issue. – Idolize

Answer 2

Is the dialog box diabling the F5 key by capturing the keypress event and stopping its propagation for the 'F5'?

Check the code for keypress captures of this sort. This would explain a lot!

Electrolyze

Answer 3

I had similar problems, but discovered I had put in a "return false;", which was stopping all other keys being registered. For example, the "return false" below will stop all other keys (like F5) being recognised except xxx and yyy.

$(document).keydown(function(e){
if (e.keyCode == xxx) {/*do something*/}
if (e.keyCode == yyy) {/*do something*/}
return false;
});

So just take out the "return false".

Unwilling

Answer 4

Solution is easy, you just have to focus on a form element of your modal dialog box. More explication on this link :

Forty