Why do the first few clicks do not work in Chrome? - javascript

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.

Related

IE11 shows newly added element only after some random click

I have a realy confusing problem with IE 11.
I use AngularJS to fill an element and display the element afterwards.
It works perfectly in FireFox and Google Chrome. In IE11 it wouldn't show until I click somewhere. It doesn't matter where I click. It could be somewhere on the page itself or my windows taskbar or on my second monitor.
I don't get any javascript errors on the console. After the random click IE shows at first only blank HTML. The styling is applied a moment later.
EDIT:
My Porblem is super strange. I've never seen something like this bug. My Code is running perfectly. All elements are thier with right values at the right place. All CSS rules should be applied. The pagination shows only after a completly random click somewhere but this only happens in IE11. Every other browser works like a charm.
Have any body saw this before?
I've asked two ather web devellopers in my company and we did code reviews but can't find any bugs in the code.
We think it's an IE11 bug. But there seems to be no one that can confirm this.
Try using $scope.apply and surround your scope change statements with $scope.apply.
$scope.$on("showPaging", function(){
$scope.apply(function() {
$scope.showPaging = true;
}
});
The use of $scope.apply is not encouraged though.

JavaScript button no longers works on mobile

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

Javascript-Alert box

I am working on a single page application using angularJS which will work on Intranet. One of the requirement is after every 15 min i have to forcefully show a message to the user even if it he is working on some other program and once he click on OK button automatically that browser tab need to be shown.
this functionality need to work on IE11/IE Edge/Chrome/Mozilla firefox.
when i tried Javascript alert box with chrome it works as expected but when i tried it with firefox and IE it highlight the tab. unless user goes to that tab alert box doesn't shown up.
Is there any workaround for this?
Is there any other good solution?
I have priority for IE/Edge.
Thanks in advance.
I haven't really messed with AngularJS, but if it's just JS it should take normal JS. This code seems to work for me and I tested it and it worked for me (having it set to 1 second). The first block is the function to allow it to repeat, and the second block allows the code to initialize the loop.
function alertBoxTimer(){
window.setTimeout(function() {
alert('message goes here');
alertBoxTimer();
}, 900000); //60*1000*15 = 900000 = 15mins
}
//initialize alert
alertBoxTimer();

pageshow event on iphone fires only once

I'm trying to use pageshow event on safari (iphone) to fix some problems with back button cache. But it seems to work only one time when using back button.
I have this handler on page A:
window.addEventListener("pageshow", function () {
alert("pageshow");
});
Then i go to page B and go back to A - everything works fine. But when I go to page B again and go back to A again, then nothing happens.
example:
go to this fiddle: https://jsfiddle.net/y278q8q0/, then navigate to any other page and play with back and forward buttons. The event will fire only once.
That how it looks on iphone 6 with ios 8.4:
https://vid.me/5WPe
edit:
question was marked as a duplicate of this one: 'pageshow' is not received when pressing "back" button on Safari on *IPad"
It's hard to say if those problems have the same cause. In my case event always fires once at the beginning. Also I tried to implement all non-jquery solutions from mentioned question and none of them is working for me.

Keydown does not always work in Firefox

I develop a small web app. The user can click on button and a modal dialog appears. On this dialog, the user can choose from different options. I used the jquery keydown callback to give the power to use the keyboard seleceting the different options.
I bind this way:
$('body').bind('keydown',this.keydown_handler);
It works perfectly in Chrone and in Safari. But sometimes in Firefox it just does not work. When I switch between browser tabs, it will be fine. When I click somewhere in the dialog it works fine again. But sometimes I click on one of the option provided, It stops working. The options are images in different divs.
$(document).bind('keydown',this.keydown_handler);
This seems to always work:
$('body').on('keydown', function (e) {
alert('Clicked in body')
});

Categories

Resources