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

Answer 1

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);

Answer 2

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?