I have been trying for the past few days to get jQuery working in PhoneGap's Hello World template, but no luck. I can't seem to get jQuery to work at all.
In the example below, I added a button to the default Hello World code and I want it to display an alert each time it is clicked. The HTML is:
<html>
<head>
*<!-- different metas and link to css -->*
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript"> app.initialize(); </script>
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id = "deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
<br>
<button class = "event clkhere"> Click here </button>
</div>
</div>
</body>
</html>
And the js/index.js file is:
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener("deviceready", this.onDeviceReady,false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
var receivedButton = parentElement.querySelector('.clkhere');
receivedButton.setAttribute('style', 'background-color: #008CBA;');
$(".clkhere").click(function() {
alert("button clicked") ;
});
alert("reached this far");
console.log('Received Event: ' + id);
}
};
Above, the difference compared to the default PhoneGap JS is a) My button becomes blue when deviceready, b) The jQuery code, and c) Another alert after the jQuery code to see if it gets triggered. Here, the first alert gets triggered but the button click doesnt work and the second alert doesn't get triggered.
I have tried multiple suggestions about $(document).ready placement, and even tried rearranging the order of the scripts in index.html, but nothing seems to have worked.
Any thoughts would be much appreciated. Thanks
I believe you need to add jquery’s $().ready() around your document.addEventListener(“deviceready”), so that your onDeviceReady() will not trigger until both jQuery and Cordova have completed loading.
The deviceready event is different than other events, in that if the event is already “done”, setting the listener will fire the callback immediately. Setting the deviceready event listener inside jQuery’s $().ready() function will ensure that both Cordova and the DOM/jQuery are ready for your code.
Related
Here is my website at http://tylerfurby.com - I am trying to get this following click function to work:
$("#click").click(function() {
console.log('clicked on #click');
enterSite();
});
It seems do be doing nothing at the moment, here is the HTML:
<div class="interact">
<h2 id="click"><a class="enterSite">Click here to continue</a></h2>
</div>
<script type="text/javascript" src="script.js"></script>
</div>
And here is the function I am trying to have called within the click function:
var enterSite = function () {
$("#click").addClass('blur');
$("#click").animate({ left: "100%" }, 2000,'easeOutElastic', function() {
$(this).removeClass('blur')
});
}
Thanks for your time.
Your problem is a z-index problem. The #click is not receiving the event. Also, "click anywhere" should probably use $(window).on("click") instead.
I have the following HTML:
...
</head>
<body>
<div class="app">
<h1>Match It!</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<button id="camera">take a pic</button>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
...
I am trying to make the camera open when the button with id camera is clicked.
I have the following JavaScript in index.js:
var app = {
...
cameraUse: function() {
navigator.camera.getPicture(function(imagePath){
document.getElementById("photoImg").setAttribute("src", imagePath);
}, function(){
alert("Photo cancelled");
}, {
destinationType: navigator.camera.DestinationType.FILE_URI
});
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
document.getElementById("camera").addEventListener("click", cameraUse, false);
},
I want the cameraUse function to execute when the button is clicked.
Did you download the cordova camera plugin, if not download and try your code
use
for cordova version 5.0+
cordova plugin add cordova-plugin-camera
for older versions
cordova plugin add org.apache.cordova.camera
Changed my javascript to this:
onDeviceReady: function() {
app.receivedEvent('deviceready');
document.getElementById("camera").addEventListener("click", function() {
navigator.camera.getPicture(function(imagePath){
document.getElementById("photoImg").setAttribute("src", imagePath);
}, function(){
alert("Photo cancelled");
}, {
destinationType: navigator.camera.DestinationType.FILE_URI
});
}, false);
}
The difference lies in the fact that I moved the code responsible for opening the camera, directly into the addEventListener call, instead of having it in it's own function within the app variable.
I'm starting to use Cordova 3.1.0 now. I use command line to generate a project and then modify the existing code.
I copy and paste the following code from official website to test.
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.addEventListener Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });
}
</script>
</head>
<body>
</body>
</html>
This doesn't work. There are no alert. Then I added a button to try to fire the events.
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.addEventListener Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
$("#btn").click(function(){
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });
});
}
</script>
</head>
<body>
<button id="btn">trigger</button>
</body>
</html>
This time, it works with second time. It means, it doesn't work when I click the button first time. But it works at the second time when I click the button. After that, I use console log inside the callback function to debug. The logs were not appeared at the first time (appeared at the second time and third, forth....).
I don't really know why this happened. I followed all steps from official website. Creating project, installing plugin, building and so on.
Could someone give me a hand?
I ran into the same problem. On further investigation, I found that the events weren't firing in the emulator / browser, but fired fine on the Nexus 7 device that I do my testing on. Hope that helps!
It looks like it's a problem with the last phonegap/cordova version 3.1.0.
https://groups.google.com/forum/#!topic/phonegap/e5_5unC2fYs
Try an older version.
I need to handle 'tweet' event. That is what I have now, but it doesn't work:
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
function jsTweet() {
// some other stuf here
// ...
var urlTW = "https://twitter.com/intent/tweet?text=Text&url=http://my_url.com";
var winTW = window.open(urlTW,'','toolbar=0, status=0, width=650, height=360');
}
(function() {
twttr.events.bind('tweet', function(event) {
alert('tweet!!!!');
});
}());
</script>
<a href="javascript:void(0)" onClick="jsTweet();">
Several things :
1/ Close your anchor tag.
2/ Your anonymous function is called only when the page is loaded. The twttr object doesn't exist at this time. So there is no binding done. Debug your function with Firebug or something, this should appear as an error.
I must be looking wrong on this but I can't find the trick:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://www.listinventory.com/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.google.com/p/jquery-utils/source/browse/trunk/src/jquery.countdown.js"></script>
<script type="text/javascript">
$(function hello() {
// function that does something exciting?
var liftOff = function () {
// ....
};
// Get a date that is some (short) time in the future
var getDeadline = function () {
var shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
return shortly;
};
// Attach click handler to all our buttons
$("div.mainpanel button.resetButton").click(function (event) {
// I am assuming that you will not be nesting these controls?
var $mainpanel = $(this).parents("div.mainpanel") // this will find the mainpanel div that contains the pressed button
.effect("highlight", {}, 700);
$("div.shortly", $mainpanel) // this will find any div with the class = shortly inside mainpanel
.countdown('change', { until: getDeadline() });
});
// Start all countdowns going on page load
$('#shortly').countdown({
until: getDeadline(),
onExpiry: liftOff,
layout: '{sn}'
});
});
</script>
<div class="mainpanel">
<div>
test
</div>
<div class="shortly">
</div>
<button class="resetButton">
Reset
</button>
</div>
</asp:Content>
I get an "Microsoft JScript runtime error: Object doesn't support this property or method" exception in the countdown.
You could try to drop the "hello" from $(function hello() {
It is not necessary.
Where is the code for the countdown method? is this in a JQuery plugin or is it a function of your own?
Is it possible the naming of $mainpanel is conflicting with something else? Try renaming this to another name (without the $).
I think it must be how you reference your plug-in code. I pasted the code in-line and it works without and error.
See here for my test: http://jsfiddle.net/3UwCg/