I want to scan barcode from my android mobile,I am using PhoneGap for that,my Issue is I want to scan barcode on click event of button,below Code Work perfectly for me but when i use this on button click it want works
<body>
<div class="app">
<h1>DevExpress DevExtreme JS HTML</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
<script type="text/javascript">
var app = {
initialize: function () {
this.bindEvents();
},
bindEvents: function () {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function () {
app.receivedEvent('deviceready');
var scanner = cordova.require("cordova/plugin/BarcodeScanner");
scanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
}
);
},
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;');
console.log('Received Event: ' + id);
}
};
</script>
<script type="text/javascript">
app.initialize();
</script>
</body>
But This Code Don't Works
<script type="text/javascript">
function scanCode(){
var scanner = cordova.require("cordova/plugin/BarcodeScanner");
scanner.scan(
function(result){
document.getElementById("data").value= result.text;
},
function(error){
alert("Scan failed: " + error);
}
);
}
</script>
</head>
<body>
<h3>Barcode/QR Code Scanner And Encoder</h3>
<input type="button" value="Scan Code" onclick="scanCode();"/><br/><br/>
Data : <br/>
<input type="text" name="data" id="data" /><br/><br/>
</body>
Plese Help
Create a globally scoped variable for scanner, then in document ready keep the line that assigns this to the cordova.require, then in your button event call scanner.scan
Example:
<body>
<div class="app">
<h3>Barcode/QR Code Scanner And Encoder</h3>
<input type="button" value="Scan Code" onclick="scanCode();"/><br/><br/>
Data : <br/>
<input type="text" name="data" id="data" /><br/><br/>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
<script type="text/javascript">
var scanner = null;
var app = {
initialize: function () {
this.bindEvents();
},
bindEvents: function () {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function () {
app.receivedEvent('deviceready');
scanner = cordova.require("cordova/plugin/BarcodeScanner");
cordova.require("com.phonegap.plugins.barcodescanner.BarcodeScanner");
},
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;');
console.log('Received Event: ' + id);
}
};
function scanCode(){
scanner.scan(
function(result){
document.getElementById("data").value= result.text;
},
function(error){
alert("Scan failed: " + error);
}
);
}
</script>
<script type="text/javascript">
app.initialize();
</script>
</body>
Related
I'm rather new to this and currently working on my first app (for a school project). I followed this https://www.w3.org/TR/geolocation-API/ tutorial. When I open the project in the browser (on a pc) it gives the coordinates but once installed (though phonegap) on my phone nothing seems to happen. Also the implementation with google maps does not seem to work (also not on the pc). Can any of you help me or redirect me to easy to follow guids?
These are the sources I looked at as well:
https://demos.jquerymobile.com/1.4.5/map-geolocation/
https://www.w3.org/TR/geolocation-API/
https://forum.jquery.com/topic/jquery-mobile-activating-geolocation-on-mobile-devices
https://mobiforge.com/design-development/html5-mobile-web-a-guide-geolocation-api
https://cordova.apache.org/docs/en/3.0.0/cordova/geolocation/geolocation.getCurrentPosition.html
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML =
"Latitude: " +
position.coords.latitude +
"<br>Longitude: " +
position.coords.longitude;
}
</script>
<html>
<head>
...
<script>
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
}
// user Current Position
function displayAndWatch(position) {
setCurrentPosition(position);
watchCurrentPosition();
}
function setCurrentPosition(pos) {
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker({
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
map.setCenter(center);
}
function locError(error) {
// the current position could not be located
}
});
<script>
</head>
<body>
...
...
<script async defer src="https://maps.googleapis.com/maps/api/js?key=******(Your API Key)">
</script>
</body>
<html>
<!doctype html>
<html>
<head>
<title>Huisartspraktijk app</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- /jquery links en scripts. NIET VERWIJDEREN!! -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
/* css styes for the maps */
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- Script for the geolocation, Stack Overflow -->
<script>
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
}
// user Current Position
function displayAndWatch(position) {
setCurrentPosition(position);
watchCurrentPosition();
}
function setCurrentPosition(pos) {
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker({
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
map.setCenter(center);
}
function locError(error) {
// the current position could not be located
}
});
</script>
</head>
<body>
<!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps -->
<div data-role="page" id="mobiel">
<!-- /header -->
<div data-role="header">
<h1>SPOED</h1>
<div data-role="navbar">
<ul>
<li>Mainpage</li>
<li>Chat met de arts</li>
<li>Consultaanvraag</li>
<li>Doorverwijzing</li>
<li>Bloedonderzoek</li>
<li>Berichten</li>
<li>EPD</li>
<li>Mijn medicijnen</li>
</ul>
</div>
</div>
<!-- /content -->
<div role="main" class="ui-content" align="center">
<h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2>
<div style="background-color: lightyellow">
<br>
<h3> Huisartsenpraktijk Gideonse en Boekhout </h3>
<p>Meteorenstraat 4<br>
2024 RK, Haarlem</p>
<p>Telefoon<br>
023 - 525 36 00 </p>
<p>Keuze 1: Spoed <br>
Keuze 2: Herhaalrecepten <br>
Keuze 3: Assistentie</p>
<br>
<!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. -->
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap"
async defer></script>
</div>
Terug
</div>
<!-- /footer -->
<div data-role="footer">
<h2>© 2019 Huisartsapp</h2>
</div>
</div><!-- /page -->
</body>
</html>
I'm using Phonegap and FCM to send push notification in android. Currently I'm receiving push notification and it's redirecting me to a page at tapping on the notification when the app is active. But when in background or closed, it just opens the index page of the app and doesn't redirect to my page.
Here are my codes,
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
document.addEventListener("pause", this.onPause, false);
document.addEventListener("resume", this.onResume, false);
},
onDeviceReady: function() {
window.FirebasePlugin.getToken(function(token) {
document.getElementById("deviceToken").value = token;
}, function(error) {
console.error(error);
});
},
onPause: function() {
window.FirebasePlugin.onNotificationOpen(function(notification) {
window.location.href = "orders.html"; // Redirecting to this page on notification
}, function(error) {
console.error(error);
});
},
onResume: function() {
window.FirebasePlugin.onNotificationOpen(function(notification) {
window.location.href = "orders.html"; // Redirecting to this page on notification
}, function(error) {
console.error(error);
});
},
}
index.html
<body>
<div class="app" style="display: none;">
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
<input type="hidden" id="deviceToken" />
</div>
</div>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script>
app.initialize();
</script>
</body>
Is there anything wrong in my code? How can I redirect to my page upon tapping the notification when app is in background or closed?
I newbie in Phonegap Android App Development. I am trying to connect my App with remote MS SQL Server Database, I wrote an ASP.Net Web-service also to connect these two.
But when I call this Web-service via JQuery ajax() method it returns "Internal Server Error".
Code :
<html>
<head>
<title>PhoneGap Example</title>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<link rel="stylesheet" href="css/jquery.mobile.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile.js"></script>
<script type="text/javascript" >
function button_clicked(){
var name = $.trim($("#txtName").val());
var contact = $.trim($("#txtContactNumber").val());
var type = $.trim($("#txtType").val());
if(name.length > 0)
{
$.ajax({
type: "POST",
url: "http://my-domain.com/DocNote_WebService/DoctorMaster.asmx/insertDoctor",
data: "{doctorName: "+ name + ",contactNumber: "+ contact + ",doctorType: " + type +"}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success : function(data) {
alert('Record Saved Sucessfully.....!!!!');
},
error: function(xhr, ajaxOptions, thrownError) {
alert('ERROR: '+thrownError);
}
});
}
}
</script>
</head>
<body>
<section id="page1">
<header><h1>DocNote</h1></header>
<div class="content" data-role="content">
<h3>Enter Doctor Info</h3>
<div data-role="fieldcontain">
<input type="text" data-clear-btn="true" name="txtName" id="txtName" placeholder="Enter Name"/>
<br/>
<input type="text" data-clear-btn="true" name="txtContactNumber" id="txtContactNumber" placeholder="Contact Number"/>
<br/>
<input type="text" data-clear-btn="true" name="txtType" id="txtType" placeholder="Type"/>
<br/>
<button id="btnSubmit" class="ui-btn ui-btn-inline ui-corner-all" onclick="button_clicked()">Submit</button>
<button id="btnCancel" class="ui-btn ui-btn-inline ui-corner-all">Cancel</button>
</div>
</div>
</section>
</body>
</html>
My Web-service Method :
[WebMethod]
public void insertDoctor(String doctorName, String contactNumber, int doctorType) {
using (SqlConnection connection = ConnectionFactory.getConnection())
{
SqlCommand sqlCommand = new SqlCommand("Insert into DOCTOR_MASTER (DOCTOR_NAME, DOCTOR_CONTACT_NUMBER,DOCTOR_TYPE) values (#name,#contact,#type)",connection);
sqlCommand.Parameters.AddWithValue("#name", doctorName);
sqlCommand.Parameters.AddWithValue("#contact",contactNumber);
sqlCommand.Parameters.AddWithValue("#type", doctorType);
sqlCommand.ExecuteNonQuery();
}
}
Tell me what I am doing wrong .....
Thanks in Advance .........
Pass the data as an object, not a string...
$.ajax({
type: "POST",
url: "http://my-domain.com/DocNote_WebService/DoctorMaster.asmx/insertDoctor",
data: {
"doctorName": name,
"contactNumber": contact,
"doctorType": type
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success : function(data) {
alert('Record Saved Sucessfully.....!!!!');
},
error: function(xhr, ajaxOptions, thrownError) {
alert('ERROR: '+thrownError);
}
});
Finally, I found Solution Here.
data: "{ firstName: 'Aidy', lastName: 'F' }"
Then, I modified my Code and it Worked.
$.ajax({
type: "POST",
url: "http://my-domain.com/DocNote_WebService/DoctorMaster.asmx/insertDoctor",
data: "{doctorName:'" + doctorName + "', contactNumber:'" + contactNumber + "', doctorType:'" + doctorType + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success : function(response) {
alert('Record Saved Sucessfully.....!!!!');
},
error: function(xhr, ajaxOptions, thrownError) {
alert('ERROR: '+thrownError);
}
});
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>jQuery Mobile loadPage() Method</h1>
</div>
<div data-role="content" id="content_container">
<form id="my_form">
<input type="text" id="name" />
<input type="text" id="surname"/>
<input type="button" id="yes">
</form>
</div>
</div>
<script>
var storePageLoaded = false;
$(document).on('click', '#yes', function() {
$.ajax({
type: "POST",
url: "searchresult.php",
data: $("form#my_form").serialize(),
success: function(data){
$.each(data, function(i, elem) {
nic_list.push({label: elem['p_nic']});
});
}
}).done(function (data) {
$.mobile.changePage('next-page.html',{transition:"slide"});
}).fail(function (jqXHR, textStatus) {
alert(error);
});
return false;
});
</script>
I created this page to send some form data to php file and print the data in a another page.But when i try this i get following error .I have change the code little bit to retrieve the data .It works fine but i need to populate the data next-page.html
10-14 11:10:05.108: E/Web Console(9066): Uncaught TypeError: Object #<Object> has no method 'jqmData' at http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js:2
$(document).on('click', '#yes', function() {
$.ajax({
type: "POST",
url: "searchresult.php",
data: $("form#my_form").serialize(),
success: function(response){
alert(success);
}
}).done(function (data) {
$.mobile.changePage('next-page.html',{transition:"slide"});
}).fail(function (jqXHR, textStatus) {
alert(error);
});
return false;
});
In the following code i am trying to get the GPS location from the phonegap example.Iam trying this on the actual device and not on the emulator i get a time out every time.I never got the on success alert.What am i doing wrong.i have enable GPS and internet
JS
document.addEventListener("deviceready", onDeviceReady, false);
var watchID = null;
// Cordova is ready
//
function onDeviceReady() {
// Throw an error if no update is received every 30 seconds
var options = { timeout: 30000 };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
html
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"> </script>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="js/index.js"></script>
</head>
<body >
<h1>Hello World</h1>
<p id="geolocation">Finding geolocation...</p>
</body>
</html>
try with this options:
var options = { timeout: 30000, enableHighAccuracy: true };