Develop Reference

Having trouble with Phonegap (Android) and capturing click with jQuery

I'm trying to port an existing mobile web app to Phonegap, but I had difficulty handling a click event with jQuery (it worked in my browser, but not in the emulator). I've tried everything, but here is the general gist of what I'm trying to do.
HTML:
...
<span id="footerclick">Test</span>
...
<script type='text/javascript' src='alert.js'></script>
<script type='text/javascript' src='phonegap.js'></script>
<script type='text/javascript' src='js/index.js'></script>
<script type='text/javascript'>
app.initialize();
</script>
alert.js:
$("#footerclick").click(function(){
alert("I can't get this to show up");
});
That's pretty much it and I cannot get the alert to show up, I've tried wrapping it in $(document).ready(){} and a device listener. If I put something like onclick="alert('Hello')" as an attribute of #footerclick, that works also.
I think I just don't understand how Phonegap works with Javascript, but I've read the documentation several times and I don't get it. Please help, thank you.

I've found the source of the problem thanks to #tomysshadow. It turns out that the emulator was blocking the loading of scripts from external domains (in particular, jQuery) and so the .click listener obviously didn't work. My temporary fix is to download and use a local version of jQuery, but I may update this answer when I figure out how to change the config file to allow these inclusions.

Running jquery gallery makes links unclickable

I'm trying to build responsive webpage based on Zurb Foundation framework. Everything worked fine until I tried to add nanoGallery which uses jQuery too. When I add gallery scripts, top menu generated by Foundation script becomes unclickable, :hover works fine but if you click on it, nothing happens. Fell free to visit the exact page at http://emfoto.filipsvoboda.net/presentation.html.
This is how I'm trying to call each script:
<script src="js/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
jQuery(document).foundation();
</script>
<script src="third.party/transit/jquery.transit.min.js"></script>
<script src="third.party/hammer.js/hammer.min.js"></script>
<script src="third.party/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="jquery.nanogallery.js"></script>
<script>
jQuery("#nanoGallery").nanoGallery({
kind:'flickr',
(..)
thumbnailHoverEffect:[{'name':'borderLighter'}],
thumbnailLabel:{display:false},
});
</script>
I've already tried changing order of those scripts, but that does not seem to help.
EDIT: It does seem to work properly in IE10, however in Chrome-based browsers it still does not work.
EDIT2: After continual fiddling with the code it seems obvious that the presence of the gallery itself on that page causes the bug. Order of scripts doesn't seem to make any difference, as long as the gallery is not displayed, Foundation works correctly and links does work.
EDIT3: Updated the code, stripped it down and changed the order of scripts. I've added simple "a" link to the sample page and it doesn't work either.
EDIT4: I've searched for event.preventDefault() and it is present in one of the *.js files for the gallery. I've contacted the author and if we get to any solution I will post it here.
Thank you for your help.

This issue has been fixed in nanoGALLERY v4.2.1:
https://github.com/Kris-B/nanoGALLERY/releases/tag/4.2.1

I compared chrome and firefox requests and responses using Developer Extensions (chrome) and Firebug (firefox) for the info shown in Net panel. I'm not sure if the file that chrome doesn't find can be the cause of the problem but wanted to point out that difference.
chrome
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.map (Not found)
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js
firefox http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js

Atleast for time being, you can have a workaround for this by having a click handler which will read the url and take the page to that url.
$(function () {
$("a").click(function () {
var url = $(this).attr("href");
window.location.href = url;
});
});

jQuery fancybox not working in IE7

I've got a problem in good old IE7, as one of my clients is still using it.
For some reason, fancybox doesn't open and just throws a JS error in the jquery file itself.
I've tried debugging it, but have not found the solution as of yet.
Can you guys help me out here?
The site is http://beta.baeckerei-glasenapp.de/filialen/ and, as you can see in other browsers, the fancybox should open once you click on one of the 9 elements.
BTW: The HTML is generated by my CMS, so please excuse the "dl>a", which is nit valid HTML5 AFAIK.
Thanks
Tobias Timpe

There is a new version, which may solve the issues you are struggling with:
http://fancyapps.com/fancybox/

using jQuery in Safari Extension

I am trying to make a simple Safari 5 Extension that just injects a custom javascript. Any ideas how can I make use of jQuery in this custom script, please? I only know it's possible, because it is mentioned on one of WWDC videos, but I don't know how to do it.
Thanks

You can include jquery.js as a "start script". Your regular script (as an "end script") will see it.

I believe that if you don't need to keep jQuery updated, just copying the source code of jQuery into your extension's code base should work.

What is the "Operation Aborted" error in Internet Explorer?

I recently added JQuery's date-picker control to a project. In Internet Exploder, I get the following error message:
Internet Explorer cannot open the
Internet site
http://localhost/
Operation aborted
What is causing this problem?

There was a related question earlier today:
Operation Aborted Error in IE
This is a common problem.
It occurs in IE when a script tries to modify the DOM before the page is finished loading.
Take a look at what sort of scripts are executing. You'll find that something is getting started before the page is finished loading. You can use the window.onload event to correct the problem (or one of the onDomReady library functions).

Just elaborating Keparo's answer.
You can put your script inside one of the following functions(as per the library you are using) and that will resolve the issue.
prototype.js:
document.observe(’dom:loaded’, function () { /* your script goes here */ }),
jquery:
jQuery(document).ready(function () { /* your script goes here */ })
mootools:
document.addEvent(’domloaded’, function () { /* your script goes here */ })

Found this possibly related blog post: http://blogs.msdn.com/ie/archive/2008/04/23/what-happened-to-operation-aborted.aspx
Or this: http://weblogs.asp.net/infinitiesloop/archive/2006/11/02/Dealing-with-IE-_2600_quot_3B00_Operation-Aborted_2600_quot_3B002E00_-Or_2C00_-how-to-Crash-IE.aspx
Seems to be pretty common

I was able to fix this problem on a few pages I was having trouble with today.
If you have JavaScript that modified the DOM anywhere within the body of the page, try moving it below the </body> tag.
Example:
Change
...
<script>highlightSearchTerms();</script>
</body>
</html>
To
...
</body>
<script>highlightSearchTerms();</script>
</html>

This comes up a lot with Google Maps (used to drive me bonkers because it's hard to debug). One simple solution is to add the defer attribute to your script tags. They don't validate that way, but hey, this is real life we're talking about.