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.
Related
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;
});
});
I feel really silly asking this, but it is completely blowing my mind why my link to the Google jQuery api isn't working. I know my code isn't broken because it works here: http://jsfiddle.net/jefffabiny/8p46d/
Here are my script tags in my index file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
Other than that, the doctype is HTML5, and I'm working on an local xampp install. I bet I over looked something small; does anyone see the problem here? Thanks.
EDIT
Actually, after I submitted this post I got an alert at the top of my browser saying stack overflow requires javascript from an external domain to run properly, but it was being blocked. I guess that's my problem, but does anyone know how to fix that?
Are you executing your code after DOM is ready? jsFiddle does!
Try this:
$(function() {
$('.test').on("click", function(){
$(this).css('color', 'blue');
});
});
Ok, so I'm quite new to jQuery, but found this bizzare problem just now,
If we ignore jQuery for a second and consider this scenario, if I have two links like below both with an href and both with and onclick event. The first link will not follow the href because the onclick returns false, and the second link will because the onclick returns true.
Dont follow
Follow
This works just hunky dory in every browser as it should, the thing is, as soon as I include the jQuery script on the page this stops working in all versions of IE which then always follows the href whether the onclick returns false or not. (it continues to work fine in other browsers)
Now if I add an event using jQuery and call .preventDefault() on the event object instead of doing it the old fashioned way this behaves correctly, and you may say, well just do that then? But I have a site with thousands of lines of code and I am adding jQuery support, I don't want to run the risk that I might miss an already defined html onclick="" and break the web site.
I cant see why jQuery should prevent perfectly normal JavaScript concepts from working, so is this a jQuery bug or am I missing something?
The most likely cause is that you have a syntax error elsewhere in the page that is preventing javascript from running properly on the page. Turn on script error notifications in your browser to make sure it isn't hiding errors from you.
Try also:
onClick = "event.returnValue = false; return false;"
I corrected your sample code for the second link and tested in IE 8 and it works fine. I'm willing to bet JohnFx is right and you have some other error on your page stopping it from working.
I tested using an included jquery library as well.
Sample:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
Dont follow
Follow
</body>
</html>
In my page there is two links, register and login.
The important one now is register. When I click it, it loads a .tpl file using jquery load function. In this tpl file I include a new js file with <script> ofcourse, and it works perfectly in safari, ff, opera and chrome, but of course, Why should it be working in IE?
So my question is, what should I do to make it working in IE? I think if I put the js in the .tpl file that would solve my problem, but if there is a better solution, I'd like to hear it. No this didn't help, so I guess there is no solution : D
Now I tried it with a simple alert, it worked perfectly.
My problem has changed. If there is a $(document).ready in the JS file the IE "ignores" the whole script, but if there isn't it works perfectly. The thing is that i need that document ready. : D
Thanks.
If the script is "ignored" if there's a $(document)ready then there may be an error in that block of the script and your IE is set to stop running scripts on error.
Try to simplify your issue a bit to try to pin point it. For example, copy the following code into a brand new html file and try it out (NOTE: you'll need to change the src path to the jquery.js file.)
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('test');
}
</script>
</head>
<body>
</body>
</html>
Does the above work in IE for you or does it get ignored as well (again, after you update the path to the jquery.js file)?
If this works but it doesn't in your scenario, check your page's source in IE for how everything is loaded. The only time I've seen $(document).ready() throw an error is when the jquery.js file is not loaded prior to it or there's a conflict with the $() function...in which case you'll need the noConflict() function.
Make sure that the script tag is not in this form:
<script ... />
IE only accepts:
<script>...</script>
IE considers injection of script tags as a security issue. Change the script tag to:
document.write("<scri" + "pt src=...></scri" + "pt>");
Are you sure that your loaded javascript executes properly in IE. Perhaps it have a javascript quirk that is throwing an error and is making it appear as if it's not loading?
To test this out, non-dynamically including the javascript (include it in the page or similar) and set up a break-point in the script code and step through ot make sure it executes all the way through. Firebug would be an excellent tool for this.
I realise this is grasping at straws, but give it a try perhaps?
Anyone know anything about the Links browser? I am developing an application for Links (text mode) that is running on a terminal using Linux. The problem is that none of the 'on key' events (down, up, or press) will register. Here is the Javascript I am using:
<body onload="Alert()" onkeydown="CheckKey(event.keyCode)">
<script type="text/javascript">
function CheckKey(keycode) {
alert(keycode)
}
function Alert(){
alert("onload is working")
}
</script>
<!--A table goes here-->
</body>
The onload event is working fine, so I know that Javascript is enabled for the browser, but the onkeydown event does nothing. The problem is, I don't know if it is an issue with Links, Javascript, or possibly even a restriction of the terminal that it is running on. Was there a version of Javascript that didn't support 'onkey' events? Just a thought...
Any help would be appreciated!
I don't think that they will work. Links uses key commands for it's own navigation, I think that it's just not passing them to your script.