I have built a html page using Phonegap+Jquery targeting Andriod 4.12.
My business requirement is to take a picture using the camera API of cordova.js and then post this captured picture to a ASMX web service.
Problem : When I add a reference to Cordova.js and run the application I get an error in the LogCat “Uncaught ReferenceError: $ is not defined” but if i remove the reference to cordova.js everything works fine and i am able to post data to web service.
I am attaching my code for reference.
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript">
var varType;
var varUrl;
var varData;
var varContentType;
var varDataType;
var varProcessData;
function InsertDetails() {
alert('Inserting Details');
varType = "POST";
varUrl = "http://mobile.comp.com/service/userservice.asmx/InsertDetails";
varContentType = "application/json; charset=utf-8";
varDataType = "json";
varProcessData = true;
var uname = document.getElementById('txtname');
var pwd = document.getElementById('txtpwd');
CallService(uname.value, pwd.value);
return true;
}
//Generic function to call AXMX/WCF Service
function CallService(u, p) {
$.ajax({ type: varType, url: varUrl, data: '{"username":"' + u + '","password":"' + p + '"}', contentType: varContentType, dataType: varDataType, processdata: varProcessData, success: function (msg) { ServiceSucceeded(msg); }, error: ServiceFailed });
}
function ServiceSucceeded(result) {
var myObject = eval('(' + result.d + ')');
alert(myObject);
}
function ServiceFailed(result) {
alert('Service call failed: ' + result.status + '' + result.statusText);
varType = null; varUrl = null; varData = null; varContentType = null; varDataType = null; varProcessData = null;
}
</script>
</head>
<body>
<input type=text id=txtname value=John />
<input type=text id=txtpwd value=Doe />
<input type="button" id="btnSearch" onclick="InsertDetails();" style="cursor: pointer;
margin-top: 8px; vertical-align: top" value="Insert Details" />
<button id=btn1>Capture Photo</button>
</body>
</html>
Please help me out in this.
Thanks Nick for your help. The 3rd link helped
Finally my code worked
I added the following line of code which did the magic for me.
JQuery was recognised after that. Make sure to follow the proper sequence for javascripts else the code will not work.
The sequence in which I referred the js files: