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();
});
Related
I had users of my PWA app complaining that they sometimes had to click a button maybe 2-10 times for it to fire. I could not figure out what caused this. First I thought that maybe it was due to an error in my code or a bad internet connection, but then I realized it:
If you don't hit a button in iOS Safari RIGHT ON the click event wont' fire.
In other words: If you tap the button with your finger, and then move your finger slightly in either direction, even just a few millimeters, and then release your finger, the click event wont' fire.
This seems to be happening quite a lot for regular human users, and they are left frustrated over what's happening (or not happening), without knowing why, or blaming my code.
I think the click event should fire if you release your finger while still being inside the button-area. This is the default behavior in Chrome for Windows at least.
Is there a solution to this? Trust me, I've been Googling this a lot and tried many different things, from different event-handlers to JS tap-libraries.
EDIT: The same thing seems to happen if you hold your finger down for more than just a split-second.
Here's a link to a PWA test app that I made containing a simple button and the code below: [the link has been removed]
Feel free to "download" the PWA by opening it in Safari and then hit Share -> Add to Home Screen.
document.addEventListener('click', function(e) {
if (!document.body.contains(e.target)) {
return;
}
if (e.target.matches('#testButton')) {
alert('Button clicked!');
}
});
<div id="testButton">Click me to test</div>
This was caused by a bug in Safari Mobile. I solved the problem by adding onclick="void(0)" to all of my buttons, like this:
<div id="testButton" class="button" onclick="void(0)">Click me to test</div>
I'm trying to create a UI that allows a user to hit Enter to progress past most screens. This works great in most browsers, but seems to fail in IE.
I set up a JS Fiddle showing the behavior -- https://jsfiddle.net/fat9qy40/2/. It seems essential that there be some sort of form element that's hidden. In my actual use case, I pop up a div with some instructions and would like the user to be able to hit Enter to dismiss it -- there's still an underlying form beneath that div.
HTML:
<html>
<head>
</head>
<body>
<button>
Fake button
</button>
<div style="z-index:100;position:absolute;top:0;left:0;border:1px solid black;background-color:green;height:50px;padding:10px">
Press enter to see an alert (unless you're using IE!)
</div>
</body>
</html>
JS:
$(document).on('keypress', function(e){
alert(e.which)
})
In Chrome, if I click in the white space in the bottom right and then hit Enter, I get a popup that says "13", which is what I would expect. In IE 11, if I do the same thing, nothing happens. Other keypresses do properly fire the keypress event however; for instance, if I hit F, I get an alert that says "102".
Anyone have any workarounds or suggestions? Thanks!
epascarello nailed it -- thanks! Strangely enough, I had thought to try keydown on my own, but it hit the same bug as keypress.
keyup, on the other hand, works great, and for my use case, I think it's just as good as keypress would have been.
We are busy with a web project where we need to capture a signature from a USB device. Getting this to work was pretty simple, but you need a browser add on.
However, once the page is placed into an iFrame (All on the same domain), it stops working. No errors or warnings, just does nothing when you click the button. It looks like the document.dispatchEvent function is not working... I think... I can see the custom event listener in Chrome dev tools.
The thing is, I added an event listener for click and that works on the page inside the iframe. It seems that dispatching custom events is not working.
Now, I'm far from an expert here and after hours of Googling and trying all sorts of different methods of which none worked I am running out of time and need help.
Is there some kind of limitation for custom events in an iframe? Security issue?
I created a JSFiddle using the example page from the company who makes the signature pads. (See below how to install browser addon). If you run the example on it's own, you will see a popup open up when you click the Sign button. You don't actually need the device for the popup to open. When the example page is in an iframe, it does nothing.
We need this to work on linux and windows, but I have the exact same issue on both platforms using google chrome.
<iframe style="width: 100%; height: 500px;" src="https://www.esignemcee.net/SigCaptureWeb/sign_chrome_ff_sigcapturewebsdk.html"></iframe>
JSFiddle
Chrome add-on install guid
EPad Signature example page
Adding top to my code seems to fix the problem. If you load your page in a iframe and need to add event listeners and dispatch those event in the 'child' page, then add top to your code like:
$(document).ready(function (){
top.document.addEventListener("MyCustom", _CustomHandler, true);
setTimeout(function ()
{
var MyDetail =
{
message: "blablabla"
};
var event = new CustomEvent('MyCustom', { detail: MyDetail });
top.document.dispatchEvent(event);
}, 1000);});
function _CustomHandler(EventData){
alert(EventData.detail.message);}
This seems to only be an issue when trying to engage with extensions in chrome. Normal events seem to work just fine. As such the code I've added above will work either way, but this is just to show exactly how the 'top' keyword is used.
Hopefully leaving this here will prevent someone else from spending 4 days trying to figure out why dispatching some events work in an iframe and some don't when using chrome. Chrome seems to handle events dispatched for extensions slightly different. I've not been able to find any documentation on this, but custom events and working with extensions like this from javascript is knew for me. Maybe someone more knowledgeable can add some more info.
I have a button on my website but when I click, it doesn't respond. But the other button works. The location of the button where i got the error(which it doesn't respond to my click) is a bootstrap dialog. But the other bootstrap dialog works fine. May I have any suggestions or solutions ?
Following is the html code
<button type="button" class="btncanceldocument btn btn-warning" >
Cancel Document
</button>
And this is the javascript code
$(document).ready(function () {
$('.btncanceldocument').click(function () {
alert("Say hello");
});
});
Is there something wrong with it? if not i think the problem is on other javascript code. So how can i find the problem using my browser? or does my browser print some error? I have lots of javascript code on this file. I can't find the problem or error?
To answer your question, most browsers have a built in debugging tool. My personal favourite is Chrome.
If you right-click anywhere on your page then choose 'inspect' you will open it.
Here is a link that will help you - https://developers.google.com/web/tools/chrome-devtools/?hl=en
It's worth spending some time learning about that as it will save you in the long run.
When you open the debug you will be able to run JS code in the console, so you can manually fire your click using:
$('.btncanceldocument').click();
Then you will be able to make sure your code is working. If clicking with your mouse isn't working sometimes it could be as the button is actually behind a transparent element.
In the debug tool you are also able to select HTML elements so you can see if something is blocking the button. A quick tip for checking this is if you increase the CSS z-index property on the button to a large value e.g. '9999999999999' . This will bring the button 'above' the other content of the page.
Hopefully this helps,
Pete
I have a web app that uses the Facebook Share dialog using javascript. It works fine on the web however on the iPad, once you click the share button on iPad after typing in text, the keyboard doesn't disappear once you're back to the original page. I tried using this:
$("u_0_l").click(function() {
document.activeElement.blur();
$("input").blur();
});
But the same thing happens on the iPad (keyboard is still there). I don't think it's catching the id of the share button (#u_0_l) but I'm not sure what other element to tie it to. I tried putting it in the callback for the facebook button but the keyboard is still there. It is posting to FB so that's not the issue. I've googled this for so long and can't find anything useful. Any ideas how I can get this to work?