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.
Related
I am creating a web app using asp.net mvc. I want to detect a manual refresh by a user,
but I am not able to get the following events
1: beforeunload
2: unload
the following way I Tried
1
$(window).on('beforeunload', function () {
pageCleanup();
});
2
$(window).on("unload", function () {
pageCleanup();
});
function pageCleanup() {
alert(1)
}
3
window.addEventListener("unload", logData);
function logData() {
alert(1)
}
4
$(window).unload(function () {
alert('1');
});
the above is an example with alert, I want to have an ajax call in
unload function
but none of these seems to execute when a user press any kind of refresh(F5, ctrl-shift-R, ctrl-R, from url tab)
what should I try now?
Hi Check Once and Let me know
<html>
<head>
<title>Refresh a page in jQuery</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<h1>Stop a page from exit with jQuery</h1>
<button id="reload">Refresh a Page in jQuery</button>
<script type="text/javascript">
$('#reload').click(function() {
location.reload();
});
$(window).bind('beforeunload', function(){
return '>>>>>Before You Go<<<<<<<< \n bro!!Working';
});
</script>
</body>
</html>
You should use bind for beforeunload:
$(window).bind("beforeunload", () => alert(1));
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
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.
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.
Can anyone explain to me how to get the device's IMEI number from Phonegap?
I am using the IMEI plugin in my app it is not showing anything.
To install, I have tried both:
phonegap plugin add https://github.com/zho/phonegap-imeiplugin.git
-- OR --
cordova plugin add imeiplugin
Example Usage:
window.plugins.imeiplugin.getImei(callback);
function callback(imei) {
console.log("My Android IMEI :" + imei);
I want the output to be displayed when user opens the app, but it is not showing.
here is the solution that how can you use imeiplugin
Index.html
<!DOCTYPE html>
<html>
<body>
<h1 id="demo"></h1>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/index.js"></script>
<script> app.initialize(); </script>
</body>
</html>
Index.js
var app = {
// Application Constructor
initialize: function () {
app.bindEvents();
},
bindEvents: function () {
document.addEventListener('deviceready', app.onDeviceReady, false);
},
onDeviceReady: function () {
window.plugins.imeiplugin.getImei(callback);
}
};
function callback(imei) {
var element=document.getElementById("demo");
element.value=imei;
}
There is something wrong with the plugin you provided it showing an error like imeiplugin is unefined at window.plugins.imeiplugin.getImei(callback);
so i tried with the below and its worked for me
cordova plugin add org.hygieiasoft.cordova.uid
and call the finction on device ready
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
console.log(cordova.plugins.uid.IMEI);
}
check this for more info
Currently i am working on Mobile Apps using PhoneGap (Cordova 2.2), JQuery and Javascript. Landing Page is Login Page. So once i entered into Dashboard Page using login credentials, when i click the BACK BUTTON its returns to the login page not stay on dashboard page. What can i do??? Suggestions welcome.
I've tried,
SCRIPT
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-2.2.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to call Cordova methods
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
alert("Back Button Clicked"); //called the alert..checking
}
</script>
HTML
<body onload="onLoad()">
</body>
My onDeviceReady and onBackKeyDown Function not working / Fired. Am i missing something???
Try with loggin variable to check if login and do something on the call back function.
function onBackKeyDown(evt) {
evt.preventDefault();
evt.stopPropagation();
if(loggedin=='yes'){
//dont do anything or show popup
}else{
history.back();
}
}
You need to bind the eventLinstener first, and call the app.initialize() in the page onLoad OR $(document).ready() method.
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
};
Try this
//after successful login
localStorage.setItem('login', 1);
// and your back function callback
function onBackKeyDown(e) {
e.preventDefault();
e.stopPropagation();
var isLogin = localStorage.getItem('login);
if (isLogin){
// stay here
} else {
history.back();
}
}