Refresh (F5) not working in jQuery Dialog

StackOverflow https://stackoverflow.com/questions/2007545

  •  18-09-2019
  •  | 
  •  

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();
     }
});
Was it helpful?

Solution

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.

OTHER TIPS

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!

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".

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top