phonegap jquery ajax fails ($.support.cors = true)

Question

jquery.mobile-1.1.1 jquery-1.7.2.min cordorva-1.9.0

I'm just getting started with this and been screwing around with it for a week now... I've read every article out there and tried every combination I can think of but still nothing working. As a last resort I moved this out of phonegap and to a real browser page and I'm getting some undefined errors:

// if these are NOT set I get the "NO Transport" error
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;

// however, with the above defined (true), the following is the error:
// xhr.statusText = "error"
// textStatus = "error"
// errorThrown.message = "Access Denied"


function login(username, password)
{
  var serviceURL = "http://mobile.mydomain.com/";
  var strData = "username="+username +"&password="+password;

  // setup the paramaters for the ajax call
  var ajaxParams = {  
      type: 'POST',
      url: serviceURL + 'mypage.php',
      data: strData,
      datatype: 'json',
      success: function(xmlData, textStatus, xhr) { onLoginOK(xmlData, textStatus, xhr) },
      error: function(xhr, textStatus, errorThrown) { 
                      onLoginFailure(xhr, textStatus, errorThrown) },
      timeout: 5000,
      cache: false
  };

  // make the ajax call
  $.ajax(ajaxParams);
}

function onLoginOK(data, textStatus)
{
  // probably not right but haven't gotten this far!
  var what = jQuery.parseJSON(data); 

  alert("Login results: " + data); 
  if(what.status == "OK")
  {
    localStorage.setItem("door", what.username);
    localStorage.setItem("knock", what.password);
    localStorage.setItem("house", what.userid);
  }
  else if(what.status == "FAILED")
  {
      alert("Login failed: " +what.text);
  }
}

function onLoginFailure(xhr, textStatus, errorThrown)
{
  alert("There was an error: The server reported: " + xhr.responseText 
        +"\nstatus: " +textStatus 
        + "\nerror: " +errorThrown);
}

Inside the cordova.xml I allowed access to my domain with:

<access origin="http://mobile.mydomain.com" subdomains="true "/>

Anyone have any suggestions?

======================================================================== this is from eclipse:

07-27 09:12:16.612: I/dalvikvm(1295): Could not find method android.webkit.WebView.<init>, referenced from method org.apache.cordova.CordovaWebView.<init>
07-27 09:12:16.612: W/dalvikvm(1295): VFY: unable to resolve direct method 3116: Landroid/webkit/WebView;.<init> (Landroid/content/Context;Landroid/util/AttributeSet;IZ)V
07-27 09:12:17.339: I/webviewdatabase(1295): openOrCreateDatabase1
07-27 09:12:17.362: I/CordovaLog(1295): Changing log level to DEBUG(3)
07-27 09:12:17.362: I/CordovaLog(1295): Found preference for useBrowserHistory=false
07-27 09:12:17.378: E/dalvikvm(1295): Could not find class 'android.webkit.WebResourceResponse', referenced from method org.apache.cordova.CordovaWebViewClient.generateWebResourceResponse
07-27 09:12:17.378: W/dalvikvm(1295): VFY: unable to resolve new-instance 451 (Landroid/webkit/WebResourceResponse;) in Lorg/apache/cordova/CordovaWebViewClient;
07-27 09:12:17.378: W/dalvikvm(1295): VFY: unable to find class referenced in signature (Landroid/webkit/WebResourceResponse;)
07-27 09:12:17.386: W/dalvikvm(1295): VFY: unable to find class referenced in signature (Landroid/webkit/WebResourceResponse;)
07-27 09:12:17.386: W/dalvikvm(1295): VFY: unable to find class referenced in signature (Landroid/webkit/WebResourceResponse;)
07-27 09:12:17.386: I/dalvikvm(1295): Could not find method android.webkit.WebViewClient.shouldInterceptRequest, referenced from method org.apache.cordova.CordovaWebViewClient.shouldInterceptRequest
07-27 09:12:17.386: W/dalvikvm(1295): VFY: unable to resolve virtual method 3127: Landroid/webkit/WebViewClient;.shouldInterceptRequest (Landroid/webkit/WebView;Ljava/lang/String;)Landroid/webkit/WebResourceResponse;
07-27 09:12:19.706: W/dalvikvm(1295): No implementation found for native Lcom/carrieriq/iqagent/client/NativeClient;.clientInit (Ljava/lang/Object;)I
07-27 09:12:21.979: I/Database(1295): sqlite returned: error code = 14, msg = cannot open file at source line 25467
07-27 09:12:22.198: I/Web Console(1295): Error: SyntaxError: Unexpected token ILLEGAL at file:///android_asset/www/cordova-1.9.0.js:1012
07-27 09:12:22.347: I/Flex(1295): loadOperatorCode() strOp is AT&T
07-27 09:12:22.347: I/Flex(1295): loadOperatorCode() strMccList is 
07-27 09:12:22.347: I/Flex(1295): loadOperatorCode() cr.query strMCC strMNC 
07-27 09:12:22.354: I/Flex(1295): loadOperatorCode() mOperatorIndex ==> 1
07-27 09:12:24.167: I/Web Console(1295): **Error** initializing Network Connection: Class not found at file:///android_asset/www/cordova-1.9.0.js:5317
07-27 09:12:26.854: I/Web Console(1295): **JSCallback Error:** Request failed. at file:///android_asset/www/cordova-1.9.0.js:3747
07-27 09:12:28.331: I/Database(1295): sqlite returned: error code = 14, msg = cannot open file at source line 25467
07-27 09:12:28.347: I/Web Console(1295): **Error:** SyntaxError: Unexpected token ILLEGAL at file:///android_asset/www/cordova-1.9.0.js:1012
07-27 09:12:28.386: I/Web Console(1295): **Error** initializing Network Connection: Class not found at file:///android_asset/www/cordova-1.9.0.js:5317

score 4 · Answer 1 · answered Jul 27 '12 at 06:07

4

First of all you should add these before adding your cordova or JQM scripts

<script type="text/javascript">
$(document).bind("mobileinit", function() {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
});
</script>

Then you should make a ajax request like this

$
.ajax({
    cache : false,
    type : 'POST',//While GET working
    async: false,
    url : "http://192.168.1.100/something.xml" + "?time=" + Date.now(),
    data : {
        key : "value"
        },
    dataType : "xml",
    success : function(xml) {
            },
    error : function(xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
    }
});

If this doesn't works for you that make use of XMLHttpRequest

var req = new XMLHttpRequest();
req.open("POST", "http://192.168.1.100/something.JPG", true);
req.setRequestHeader("Content-type", "image/jpg");

req.onreadystatechange = function() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            var data = req.responseText;
        }
    }
};
req.send(null);

answered Jul 27 '12 at 06:07

coderslay

13,960
31
73
121

It doesn't matter where I set $.support.cors = true; or $.mobile.allowCrossDomainPages = true; - I've tried setting them as you did and also before the calls but that's not the issue. – ppetree Jul 27 '12 at 11:53
It was a standard to define in mobileinit as explained here http://jquerymobile.com/test/docs/pages/phonegap.html – coderslay Jul 27 '12 at 11:56
I, did define the $.support.cors in init(). I spent 3 days trying xmlhttpRequest. Reverting back to the eclipse indigo enviornment, I'm getting the "OnDeviceReady fired" alert, when I click the login link/button the alert box shows: xhr.statusText: OK, textStatus: parseerror: errorThrown: Unexpected token ILLEGAL. – ppetree Jul 27 '12 at 12:38
parseError and unExpected Token ... Probably something wrong in server side – coderslay Jul 27 '12 at 12:45
No, nothing wrong on the server side... I can run the script from a browser and get back legitimate json. – ppetree Jul 27 '12 at 18:20

score 0 · Answer 2 · answered Jul 26 '12 at 22:21

What error do you get? Can you post the request and response text from FireBug or IE Developer Tools?

Looking at your code I have a few ideas you might try if you haven't already:

1) Specify the contentType.

 contentType: "application/json; charset=utf-8" // <-- or whatever contentType

2) If mypage.php expects the username and password in the body of the request then try changing strData to json

strData = {
     username:username, password:password
}

3) And/or Stringifying it depending on whether mypage.php expects an object or a string

JSON.stringify(strData);

Also, since your handlers have the exact same params as the anonymous handler functions you can replace:

success: function(xmlData, textStatus, xhr) {
         onLoginOK(xmlData, textStatus, xhr) 
},
error: function(xhr, textStatus, errorThrown) { 
       onLoginFailure(xhr, textStatus, errorThrown) 
},

with a direct assignment:

success: onLoginOK,
error: onLoginFailure,

which can make debugging a little easier by removing possible sources of bugs.

The resulting code might look as below...

function login(username, password)
{
    var serviceURL = "http://mobile.mydomain.com/";
    var strData = JSON.stringify({
        username:username, password:password
    });

  // setup the paramaters for the ajax call
  var ajaxParams = {  
      type: 'POST',
      url: serviceURL + 'mypage.php',
      data: strData,
      datatype: 'json',
      contentType: "application/json; charset=utf-8" // <-- or whatever contentType 
      success: onLoginOK,
      error: onLoginFailure,
      timeout: 5000,
      cache: false
  };

  // make the ajax call
  $.ajax(ajaxParams);
}

It would really help to see the request and response text. If none of the above helps can you attach them to your reply?

I'm getting an "Access Denied" error in IE9. In Firefox xhr just shows error. I did simplify the onSuccess/OnFailure, but no change there. Not sure why we need to stringify the data as this is supposed to be a POST in which case the backend would be expecting to extract the variables in the scripts post/get handler. Also, the content type should be left as a form, should it not? — ppetree, Jul 27 '12 at 11:57

phonegap jquery ajax fails ($.support.cors = true)

2 Answers2

Linked