button click javascript not running on iPad/iPhone safari - javascript

Hello I was reading up on this problem and people had mentioned that to get click to run on safari and chome you needed to have the code set up like so
$('input[type=submit]#btnIsAddress').bind('click', function (event) {
alert("this is code");
selectAddress(event);
event.preventDefault();
return false;
});
This code works on all browsers on a desktop and will work on Chrome, Dolphin and Mercury on an iPad but it will not work on safari on an iPad (go figure the most used one...) Instead it will treat the button as if its just text, it doesn't even try to run someone or give me the little click animation when pressed.
However I have noticed that if I let the iPad go to sleep mode while on the page then turn the iPad back on the button will work with no problem.
Has anyone else run into this sort of problem before? I'm guessing its something to do with my javascript but it seems like pretty simple script...

We don't see the entire context. If you're button is dynamically added to the DOM then did you try using .live() instead of .bind() ?
.live() is still available in jquery 1.4.3.
.on() for jquery 1.11

Related

How do I disable body.blur() in IE8?

I work on an enterprise web application that runs in IE8. It appears blur() is being called on the body causing the IE window to be sent to the background. Unfortunately this code is in a portion of the application that is controlled by the vendor.
Is there any possible way to prevent blur() from being called on the body without modifying the code that is actually calling body.blur()?
Since this is an enterprise application, solutions outside of changes in the application itself are acceptable; Such as changes to IE8 settings, registry, etc.
You should be able to hard code blur to a dummy method. If you can get in before it is called, just call body.blur = function() {}; (assuming body is pointing to your DOM body element).
Using jQuery you could simply block the event :
$('body').blur(function(e) { e.preventDefault(); });
If using Firefox is an option, i have two answers where i propose replacing the function using Greasemonkey.
Using javascript to create a keylistener hotkey for facebook page "like"
Greasemonkey script to replace jQuery plugin function?
If you have to use IE, you might need to change the page itself.
(I know there is Trixie and IE7pro for IE, but never used).
I had an issue when using javaScript editor:CLEditor, if I use jQuery blur() method on it, the IE window goes to the background. CLEditor has it's iframe which has its own body. When you extract that body and use body.blur(), IE browser will go to the background.
Other browsers are not showing that behavior, so it is better to use FF, or Chrome if you are experiencing this.
If you remove body.blur(), probably you would have less problems with IE than you have now, but still you could experience some minor bugs (something is not loosing focus at certain point), but I suppose you could live with it. However if blur() event is enriched with some logic, it could be problem - then find its definition and move logic to some other event that is started with the browser (onload, or ready).
document.body.blur=function(){document.body.focus()}

Why is jQuery unload not working in chrome and safari?

unload function in jQuery works fine in Firefox but not in chrome and safari. please check this fiddle in chrome and Firefox. http://jsfiddle.net/jeevankk/Gywnw/2/ . Alerts a message when the page is refreshed.
$(window).unload(function() {
alert("Unload");
});​
This should work to show a confirmation when the users leaves, this is also not part of any standard.
$(window).on('beforeunload ',function() {
return 'Are you sure ?';
});
I found Joseph's comment as the correct answer, So posting this answer.
Dialogs are blocked/prevented during "beforeunload" (with exception to the beforeunload prompt) and "unload" events. Can be confirmed by checking your console.
This is because the unload event is not part of any standard
https://developer.mozilla.org/en/DOM/window.onunload
check the bottom of the page i just linked to.
jQuery's unload works well in chrome too, with the exception that Chrome doesn't allow alerts within it. I've used it to set cookies. And if it works with Chrome hope it works in Safari too.
the unload function of jquery has some problem with browsers..refer the following link
http://bugs.jquery.com/ticket/5538
can you elaborate on the problem so that we can find some work around??
you can use onfocusout on the body .. but i wouldn't recommend if you are trying to use something like an alert, on this operation, asking the user not to leave your page ..
"refresh" action in the Firefox does not fire the unload event.
We should use onbeforeunload instead.
Confirm with Firefox version 47, Mac OS X

Safari 5.1 broke HTML native drag and drop?

Last night, I thought I'd do a quick project to demonstrate HTML5 capabilities and to try some things out. However, I can't seem to figure out how to get drag and drop to work in Safari, while it works perfectly in Chrome and Firefox. More precisely, it seems that drop event does not fire in Safari, when you try to drag an image inside the website into the drop area. At the same time it does fire when you drag and drop a file from desktop.
I'm not really sure, but I'm pretty certain that when I tried the same script at work (where I have Safari 5.0.2 etc), it fired the drop event (going to check it tomorrow to be sure) and gave me the FileReader-related errors that were expected. But when I just installed Safari 5.1 on my own PC, I only get dragover, enter and leave events (and drop too if the file was dragged into the browser).
I've been Googling for some time now and don't seem to find a single example of drag and drop that actually works in Safari 5.1. Even Safari's dev-centre's sample doesn't work, let alone html5demo.com 1 and html5demo.com 2. This leads me to think whether the Safari has a bug, or maybe they have implemented something mandatory that isn't reflected in the dev-centre (last updated in 2009).
The script I'm trying to fix is at my site (sorry guys, no problem specific code to post, as it seems to be broken elsewhere too).
PS! I might have introduced some bugs into my own site while desperately trying to fix the drag and drop in Safari, but I'm too tired to fix them right now.
UPDATE: Just confirmed at work that the drop event does fire in Safari 5.0.2 on Mac OS X.
UPDATE 2: Also confirmed that everything works perfectly fine with Safari 5.0.6 on Win 7, the same computer that fails with 5.1
Testing with Safari 5.1.7 Mac:
To see the drop event fire, you have to handle the dragover event and call event.preventDefault().
Here's the (quite entertaining) discussion where I found the answer:
http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
I don't know if this really solves the question because the asker's site (at least as of today) does this. It works fine on my machine (as do the HTML5 demo pages). But this may help someone coming to this thread with this problem who doesn't know about this rather unintuitive implementation detail.
I am using Safari 5.1.5 (7534.55.3) on a Windows 7 PC which I just installed the other day, no previous installs of Safari and I cannot get any of the online HTML5 drag-n-drop demos to work.
I am working on a project with drag-n-drop and Modernizr tells me that I'm good to go with Safari (Modernizr.draganddrop == true), but when I actually drop the item the drop event does not fire.
I've added alert debugging and nothing.
My testing shows that Safari 5.1.5 (7534.55.3) on a Windows 7 PC drop event is broken. All other drag events seem to work: dragstart, dragend, dragenter, dragleave, dragover.
Just to clarify: Visited your site and found no errors. Opened the console, no error, and everything appeared to function as designed. Tried all provided examples with no error.
All examples work fine Safari Version 5.1 (7534.48.3). Sorry, mate – Maybe it's a setting you've changed?
Allow me to suggest a possibility:
Go to Safari->Empty Cache... Then Safari->Reset Safari... Try reloading the page.
Likely, there's something cached that's creating a conflict. There seems to be nothing wrong with your script in the slightest.
Edit
Some things to check...
Are any of your function names containing reserved words? I've done this, had it not throw any errors, but it simply wouldn't work.
I've had some weird issues with Safari not running methods written as funcName = function(){}. If you can pin down the method that isn't firing (I add a little function when I'm developing called DBG which I'll add below – basically, if a debug flag is set, you log to the console), you can try rewriting the function.
// Some sort of boolean flag.
var debug = true;
// This is kind of an obvious function, but can be expanded as you like.
// Little tricks to make life easier.
function DBG(str) {
debug ? console.log(str) : return;
}
I still think ultimately this boils down to something caching wrong, but it's worth a try.
I encountered similar issues, the drop event appeared to not be firing. Safari apparently expects the "dragover" event to also be bound. As soon as I also added that, it worked. So ... I'm sharing in case it's relevant.
My first attempt:
$(document).bind
drop: (e) ->
// This never gets fired in safari (does work in chrome)
console.log e.originalEvent.dataTransfer.files
false
My "fix":
$(document).bind
dragover: (e) ->
console.log e
false
drop: (e) ->
// This does get fired (in chrome and safari)
console.log e.originalEvent.dataTransfer.files
false

IE9 Window Loses Focus due to jQuery Mobile

In our product, we're using the most recent development version of jQuery Mobile in our ASP.NET website. Each and every time we do an ASP.NET postback, the browser window goes to the back of the screen.
Example:
Maximize any window. Example: Visual
Studio, Word, Windows Explorer.
Maximize IE9 over it. IE9 is the only
thing you see on the screen.
Click on a button in our solution that does
a postback.
IE9 is no longer visible.
Whatever was behind it now has focus
(and fills the screen, as it is
maximized)
Only workarounds I know:
Don't include the jQuery mobile scripts.
Ensure IE9 is the only maximized window in Windows.
I don't know what jQuery Mobile is doing in the background and am assuming this is a bug in IE9 that will eventually be fixed. However, if you had any tips on how to prevent it from happening in the meantime, that would be great.
Edit: Seems it isn't on every postback. It is on every postback that performs a Response.Redirect. I should add that all my postback are actually utilizing ASP.NET AJAX, not full postbacks.
I know this is an old post, but for people coming here from Google:
I ran into this same issue today. It seems this lose focus behavior is what IE does when you trigger the blur event on the window object. This was the code that caused this issue for me:
$(document.activeElement).blur();
activeElement will default to the body element when there are no other elements in focus, and the blur event then bubbles up to the window. To fix this I simply did a check like:
if (document.activeElement != $('body')[0]) {
$(document.activeElement).blur();
}
I had similar problem with IE10 and jQuery 1.7.2.
I found these lines in my code:
$(document.activeElement).blur();
and
$(':focus').blur();
So, adding simple .not('body') resolves the problem:
$(document.activeElement).not('body').blur();
$(':focus').not('body').blur();
This same issue seems to occur with jQuery Mobile 1.4.2.
When using IE 10, with a single tab open and another window on the same monitor, if you open a popup it will send the browser to the background.
To fix this you have to edit the _handleDocumentFocusIn function. You need to change the line(10391) that reads:
target.blur();
to
if (targetElement.nodeName.toLowerCase() !== "body")
{
target.blur();
}
I made a pull request so hopefully this will be included in the next version.
Just posting this link to anybody who is experiencing more of this continued mess. I am seeing the problem on IE 9 and IE 10 on a window.location = 'BLAH', from within the Angular location resource.
This doesn't seem to solve the problem for me, but it may help others:
http://support.microsoft.com/kb/2600156/en-us

How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?

I'm writing an iPhone web app, and I want to automatically focus a text field when the page is loaded, bringing up the keyboard. The usual Javascript:
input.focus();
doesn't seem to be working. Any ideas?
It will only show the keyboard if you fire focus from a click event, so put a button on the page with a onclick that does the focus and it will show the keyboard. Completely useless except for validation (on click of submit validation code focuses on invalid element)
Edit: The following no longer works on iOS - UIWebView did allow autofocus and home screen links used to autofocus but they disabled that many versions ago.
The autofocus (see below) property doesn't work from a url in Mobile Safari but does work if you are:
using a UIWebView
using a home screen link
The fontsize of the input needs to be large enough to avoid the iOS10 zoom on double-tap (now that viewport is always zoomable) and to design the page to be sized so that it fits the screen (otherwise on page loading you get strange timing/race bugs in zoom, or if scrollable the field sometimes doesn't center to the screen properly).
autofocus: The HTML5 spec for doing this is the autofocus property of the input tag. But iOS ignores that, presumably for a cleaner UI that doesn't pop up the touch keyboard when navigating to a page. Here is a page that demonstrates the autofocus property. Before HTML5 you would call element.focus() in the window.onload event. However focus() calls are not supported on iOS except during the handler of an onclick event.
Note: this answer is old and may not be relevant to newer versions out there...
It comes as no help to you but the last poster in this thread wrote that its a bug of the webkit engine.
I can't tell if its a verified bug or not...
Last post from way back machine (as original seems to not work):
I am developing my app in pure XHTML MP / Ecmascript MP / WCSS. So
using native platform browser control api is really not an option for
me. Yes the behaviour u mention is the same as mine. I searched his
topic in the bugzilla at webkit.org and found that this indeed is a
reported bug. focus() to a text box does highlight the element but
does not provide a carat in it for the user to start entering text.
Using a timer as mentioned by "peppe#peppe.net" does not help either.
This behaviour is common across platforms (s60,iphone,android) which
use the webkit engine.
So as of now i dont see a solution to this problem.
Hope this helps
I have a similar issue, only my issue is that the focus will not occur on a 'touchend' event.
http://jsfiddle.net/milosdakic/FNVm5/
The following code will work in Chrome/Safari etc. but will fail on Mobile Safari. The only way to get it to work is to make the event on 'click', but seeing as the code is made for an iOS device, it would benefit for it to work with touch events.
It seems to be a bug with the Webkit engine.
If you are setting focus with from a click event, you need to preventDefault otherwise the click events default action will set focus on the clicked item.
A bit late maybe but for future person maybe. In our webapp running on iOS iPad (6 and more recent), we do it with a set interval:
startFocusOnTextField: function() {
this.intervalIDForTextFieldFocus = window.setInterval(function() {
document.getElementById(page.textInputFieldObj.id).focus();
}, 150);
},
Which is called on page load (jQuery mobile environment)
This is a workround:
setTimeout(function(){
input.focus();
},500);//milliseconds

Categories

Resources