So I'm troubleshooting an issue in our app and can't figure it out. I haven't written the base code and can only inject CSS and Javascript. There's a very basic span element with an ID, below that is a snippet of Javascript basically saying "if element with ID submitButton is clicked, submit form #createForm". However, on mobile it's broken and the browser is not giving any errors.
<form method="post" action="page.html" id="createForm">
<span id="submitButton">Submit form</span>
</form>
<script>
$("#submitButton").on("click", function (event) {
if (attributeEqualsDisabled($(this).attr('disabled'))) {
return true;
}
$("#submitButton").attr('disabled', true);
$('#createForm').submit();
});
</script>
Now, this works perfectly on desktop browsers, even when using the "display as iphone" mode Chrome has. You can click the button, everything works.
However on mobile safari and when adding the page as a webapp the button no longer works. When you press it the page just scrolls to the top and does nothing. I've checked it out through my Mac and everything seems normal and exactly the same as on desktop. I can even run $("#submitButton").click(); on my iphone through the console and it functions perfectly.
There are no errors or warnings in the console. Does anyone have any suggestions to troubleshoot this? I sadly can't give direct access to the code because everything is on an IP locked server.
Is there any way of seeing exactly what happens when I click the button? I've tried the "Timelines" tab but that shows nothing when I press the button.
This answer by another user fixed it: https://stackoverflow.com/a/3026621/3461722
Thank you to Robin Zigmond for pointing me in the right direction. I was thinking that something was preventing the click event from firing, but it was simply not picking up on it because I needed to track the touchstart event.
The linked answer does mention that a better solution was found by adding cursor:pointer; to the button with CSS, however my element already had that so it obviously didn't work in this case.
Add this function to detect the taps on mobile:
$('#submitButton').bind( "touchstart", function(e){
if (attributeEqualsDisabled($(this).attr('disabled'))) {
return true;
}
$("#submitButton").attr('disabled', true);
$('#createForm').submit();
});
My webapp uses jQuery along with jQueryUI components.
The events are attached using the following scheme:
$(function(){
...
$('#id').click(function(){...});
// and
$(document).on('click', '.dynamic-element', function(){});
...
});
If I click a button on the page, it happens sometimes that the first few clicks not trigger the click action, although the button "pushes in".
The weirdest thing is that I only observe this in Chrome 32, not Firefox 27 nor Safari 6 (I use a Mac). I've got real frustrated with this. The console does not give any errors.
What could be the problem? Is there any workaround?
Update
I have tried this (within a $(document).ready of course):
$('#share').click(function(){
console.log('share clicked');
// ... further code ...
});
after 20 page refreshes, I've got a completely non-registered click. :S
Here we go. :)
Update 2:
Here comes the fiddle: http://jsfiddle.net/22P2D/
Open console, open page in two tabs, and you have a fair chance it produces the phenomenon. As it did not to me.
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.
I've looked around but I haven't found an answer to what seems to be a common problem.
I have a basic dropdown menu that is activated on hover (using hoverintent plugin for jQuery). It works fine for desktop browsers but for mobile devices that don't convert hover events to click as iPad does, it doesn't work. Here's the Javascript as it is now:
$('li.threecolumns, li.twocolumns, li.onecolumn').hoverIntent(
function() {
$(this).children('div').fadeToggle(fadeInSpeed);
},
function() {
$(this).children('div').fadeToggle(fadeOutSpeed);
});
My question is: what is the cleanest and least problematic way to use clicks for mobile devices and hover for desktops for a dropdown menu? I had a couple ideas but not sure which:
Attach onclick event and disable hover every time there is a click.
Detect the ability to hover (not sure how this is done) and use a click handler if it's available.
At least iOS automatically interferes with the hover event when there is an event handler so you have to tap once for the hover event and a second time for any click event.
Detection for hove is trivial. Check if the client supports touch. If there is touch, there is no hover.
if ("ontouchstart" in document) {
// touch only code
} else {
// "desktop" code
}
By default iOs and some Androids implement a tap for hover event. It's handy, however, you need to make sure your top-level links lead to a valid anchor. The days of unclickable parent placers are gone and if that link leads only to a page with all the children listed as links, so be it. But make it go somewhere.
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.