Right, I've edited this post a bit following some further tests I've been doing, my original post is below, however, this is now the crux of the issue.
I have 3 images on a page, when one is clicked a javascript window.confirm dialog is displayed asking the user to confirm their selection. However, due to the positioning of the images on the page, the dialog appears over an image, when trying to click OK or Cancel, nothing appears to happen. However, what actually does happen is that another confirmation appears over the top of the original one, and this continues. However, if I click somewhere on the button that doesn't have the image behind, then it works, but only after double clicking.
What I've found is that when a dialog is displayed, it doesn't automatically get focus, so you have to click it to focus, before clicking the button again to close the dialog. If on the first click you click the part of a button (or the dialog itself) that has an image behind, that image is actually clicked as the dialog doesn't have focus. However, if you click anywhere in the dialog which doesn't have an image behind (therefore focusing on the dialog), then click OK or Cancel, it works (even where the OK or Cancel button has an image behind).
So what I need to know is, is there a way of automatically focussing on the dialog when it opens, therefore preventing the need for double-clicking? Or is this just a safari bug that I'll have to find another way around.
--------original post---------
I have a website with a series of images and links. When an image or link is clicked, a window.confirm dialog is displayed asking the user if they are sure they want to carry out the action.
In IE, Opera and Firefox this works fine.
However, in Safari, when I click the OK or Cancel buttons on the dialog, whatever is on the page behind the button is actually clicked, rather than the button in the dialog itself. The dialog actually says "Are you sure you want to vote for xyz", where xyz is based on the clicked image or link - when I click OK or cancel in the dialog the text changes to whatever image/link is behind that OK/Cancel button.
Has anyone seen this bug, and/or knows a way around it?
UPDATE
I've been managing to narrow it down a bit, and have just found where the issue seems to lie.
I found that if I clicked the part of a button that didn't have an image behind it (each image is actually a .NET ImageButton), then it would work (though it requires a double-click). If I click part of a button that does have an image behind it then it would open up a further alert/confirm dialog. I've put some JQuery in which adds a click event to each image, on clicking it hides the image, then displays the dialog, and the dialog works fine.
Obviously this isn't what I require (don't really want the images disappearing), but it has narrowed it down. Any ideas how this can be solved?
Another update: I think that actually the alert/confirm dialog isn't initially getting focus, hence the need to double click. If I click the dialog (anywhere where an image isn't behind) then click OK (even if there is an image behind that button) then it works. So, how do I get it to focus automatically on the dialog once its opened?
I just ran into this myself and haven't found an answer yet, but I thought I would post things I have observed to see if they're the same for you.
You say you have to click the dialog to give it focus before it will work. I have found that you simply have to click anywhere in Safari, even not on the dialog, and the dialog will start working. Furthermore, it doesn't seem to be exactly a focus issue as keyboard control of the dialog still works, Space to select OK, or Tab and Space to select Cancel. Can you confirm this?
What version of Safari are you running and what version of Windows? I am running Windows 7, Safari 5.0.3 (7533.19.4). I will try to test this on Mac as well or you could if it's convenient for you.
In Windows 7 buttons highlight on mouse over even if they are in a window without focus. This issue in Safari causes some interesting reactions in the buttons. When the dialog first pops up buttons on the page still highlight on mouse over, but the buttons in the dialog do not. After a click in Safari the Cancel button in the dialog highlights on mouse over, but the buttons on the page do not and the OK button in the dialog does not. However, if, instead of clicking in Safari, some other application is given focus by a click both buttons in the dialog highlight while the buttons on the page do not. There is even more inconsistent behaviour when Safari regains focus. If it regained focus by a click in the dialog both the buttons in the dialog highlight. If it regained focus by a click not in the dialog only the Cancel button highlights, not the OK button.
That was all if focus was transferred with the mouse. When focus is transferred by Alt-Tabbing there is different bahaviour. In that case when a different application is first given focus the buttons remain as they were with the buttons on the page highlighting and the buttons in the dialog not. If Safari is Alt-Tabbed back to it's as if nothing has happened and you still have to click to get the dialog working. If Safari is clicked on anywhere, in the dialog or not, both buttons in the dialog highlight and the buttons on the page do not.
Inconsistent behaviour of buttons can be found elsewhere in Safari. The Print and Save menu items bring up Windows default dialogs so buttons in those behave consistently with Windows. Safari specific dialogs, like the Javascript confirm, Customize Toolbar..., and Report Bugs to Apple... have different sized buttons. Furthermore, the Done button in Customize Toolbar is the default button, but will not highlight until the dialog has been clicked on. The Submit button in Report Bugs is the default button and will highlight on mouse over without clicking on the dialog, but does not show the blue ring to indicate it is default until it has been moused over.
All of this is, of course, what I experienced so it may not be the same for you. At this point, because the behaviour is so inconsistent I think it is a bug in Safari, but I will investigate further.
I was just about to report a bug myself. I have a confirm dialogue come up to request yes or no to delete an image from a gallery. This situation is performed in a popup window. Whether I click OK for true or cancel for false, the action closes the popup and thats it!
As mentioned from a previous post, if I go outside the dialogue and keep clear of any links, images or things that call javascript and click somewhere else in the popup window, go back to the dialogue, the dialogue buttons work. It seems like a focus issue. The dialogue also seems sort of transparent, clicking anywhere on it will effect anywhere underneath it as my case, I have images that when clicked on call a function.
I also encountered this problem, and this is how I resolve it.
setTimeout(function() {
var confirm = confirm("Are you sure you want to send it?");
if(confirm) {
// do stuff here
} else {
// do stuff here
}
},10);
this is quite inconvenient solution but at least it works without huge alteration and also works fine in other browsers too.
From my experience what is actually happening is the mouse clicks go thru the dialog box as if it is not there at all. If what is behind it happens to be the button that launches the dialog box you get stuck in a loop of one dialog after another coming up. I know this is nothing in my code since the same effect happens on other web sites. This is only a bug on Windows not on a Mac. I am using Safari 5.0.3 on Windows XP.
Related
Any one please help me in controlling the "X" (cancel Button) of alert box in edge browser, Either i have to remove it or i have to get the click event.
By a native dialog-boxes it isn't possible.
Other site you don't need it because the OK button has the same function like the close button in this dialog-box: in both ways the dialog-box will be closed and nothing else.
But if you want to control it you can create your own alert dialog-box. Or you can use some library or framework with custom dialog-boxes.
In my application, clicking on the caption div for a window minimizes it, and clicking on the body of the window focuses the input control. However, if the user selects some text, the browser still fires the click event. How do I distinguish between click events that eliminate a selection and those that form a selection? I tried checking window.getSelection().isCollapsed but that is still set to true in the handler if there was a selection and the click clears the selection.
Is there a correct way to do this?
EDIT: This might be a Chrome bug. The behavior works exactly as I want in Firefox. See the example code here https://jsfiddle.net/tL3obf7q/
EDIT 2: Chrome bug after all! https://bugs.chromium.org/p/chromium/issues/detail?id=289763
I know there are many links regarding Onbeforeunload,BeforeUnload and Onunload events of JavaScript which have some cross browser problems. After going through, possibly, all the questions, I want to ask this again
Is there any way so that onunload can work for Chrome and Opera?
I don't want to use onbeforeunload as it pops up before closing window.In my application user clicks a "Save And Exit" button after which an alert box is popped up showing "Your details are saved" with OK button. clicking on OK button redirects user to a new popup asking the window is about to close with yes and no buttons. onbeforeunload event as returns a string, hence it doesn't allow me to show the "AlertBox" asks for leave this page and stay on this page. which is not in alliance with my application requirement as i want as alert box. (working fine in IE, not working in Opera and chrome).
i am using unload and onbeforeunload events from code behind c#
I have clicked many buttons without ever hitting a problem like this. I'm using VB 2010. If I click on the control programmatically or manually, the screen flashes like it is just refreshing. However, if I open a separate IE window, I can click the button and it advances to another screen as expected. I have researched this on other sites and have found one suggestion that the control is using a different version than the full version, which is IE 8 in my case. This still doesn't provide a solution. Can anyone please help? Here is the code which clicks the button as well as the html of the button.
WebBrowser1.Document.All("posForm:estimate").InvokeMember("click")
<button onclick="validateForEstimate(this, 'NonITS');" type="button" name="getestiamte"></button>
Maybe try the Microsoft Browser go to your toolbox right click and click choose items then go to COM components and use the filter to find Microsoft browser then check mark it. Add it to your form and done.
So I have a weird issue in IE 10: I open a JQuery dialog with a drop down and a textbox.
I am opening the dialog in an enter jquery event on the page that opens the dialog window.
My issue does NOT happen when it is the shift event though the code called is the same.
When opened with enter though the drop down list will close as soon as you click it, the mask on the textbox is not showing its graphics and if I select the textbox and press tab the focus keeps snapping back to the textbox.
HOWEVER when I select another program and then IE again, while in the dialog, it starts to work normally again...
When I turned off the mask (jquery.maskedinput-1.3.1.min.js) instead I could not tab away from the drop down list and still could not use clicks on it.
Also without the mask switching to another program and back did not help.
All my code works exactly as it should in FF and Chrome. Also its all normal JQ (Version 1.9.1 and the ui version 1.10.1) except the mask.
Weirdest thing I have seen yet with IE.
Fixed by moving focus to another field before opening the dialog. No idea why.