2012-11-20 151 views
3

我已經使用Phonegap + Jquery構建了一個定位Andriod 4.12的html頁面。PhoneGap(Cordova.js)和JQuery.Ajax不能一起工作

我的業務需求是使用cordova.js的相機API拍攝照片,然後將捕獲的照片發佈到ASMX Web服務。

問題:當我加入Cordova.js參考,並運行應用程序,我得到的logcat的一個錯誤「未捕獲的ReferenceError:$沒有定義」,但如果我刪除提及cordova.js一切工作正常,我我能夠將數據發佈到Web服務。

我附上我的代碼以供參考。

<!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> 

請幫我解決這個問題。

回答

1

感謝尼克您的幫助。第三鏈接幫助

最後我的代碼工作

我添加以下代碼線,做了魔法我。

jQuery.noConflict(); 

JQuery後來被確認。請務必遵循正確的JavaScript順序,否則代碼將無法工作。

在我提到的JS文件序列:

  1. 參考的jquery.js(本地添加到項目)
  2. jQuery.noConflict();
  3. JavaScript代碼服務呼叫
  4. 參考Cordova.js
  5. 科爾多瓦相機交互代碼
3

做一些搜索類似的問題顯示了一些可能的答案。

1)本地加載jQuery而不是從CDN加載。您似乎已經這樣做了,但我會爲其他類似問題的人提及。

can't find jQuery's $ on asus tablet with android 3.2

2)告訴jQuery來允許跨域請求。查看下面鏈接中的部分'$ .support.cors'和'$ .mobile.allowCrossDomainPages'。

https://demos.jquerymobile.com/1.2.0/docs/pages/phonegap.html

3)告訴jQuery的發揮好。這可能是cordova.js正在使用另一個想要使用$的JS庫。由於您先加載cordova,其他JS庫在jQuery之前聲明$。

http://docs.jquery.com/Using_jQuery_with_Other_Libraries