Apache Cordova
  1. Apache Cordova
  2. CB-208

WP7 + JQuery call to $.ajax does not work

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.4.0
    • Fix Version/s: 1.5.0
    • Component/s: WP7
    • Labels:
      None
    • Environment:

      VS.NET 2010, Using the latest code for the 1.4.0 release candidate, plus a fairly simple custom $.ajax function.

      Description

      My own $.ajax function works great all by itself, but with phonegap-1.4.0.js present my $.ajax calls get hi-jacked and errors occur in that last function in phonegap-1.4.0.js. If I comment out that whole function, my $.ajax calls work just great. I need my custom $.ajax calls because they use some custom JSON code written by Rick Strahl that properly deals with Microsoft formatted dates going in and out of ASMX web services that use JSON for serialization.

      It looks like the error is happening on the line that says:

      return this.wrappedXHR.send(data);

      Is there any way I can disable the hi-jacking of $.ajax calls without modifying phonegap-1.4.0.js?

      1. json2.js
        13 kB
        Alan Neveu

        Activity

        Hide
        Jesse MacFadyen added a comment -

        Can you provide the custom $ajax function?
        Other than that, I can only recommend that you store the reference to the original XHR before phonegap.js is included in the page.

        ex.
        var _XMLHttpRequest = XMLHttpRequest;
        ... include phonegap.js ...

        Then in your $.ajax function, use 'new _XMLHttpRequest()', instead of XMLHttpRequest, which will be wrapped by phonegap.

        Show
        Jesse MacFadyen added a comment - Can you provide the custom $ajax function? Other than that, I can only recommend that you store the reference to the original XHR before phonegap.js is included in the page. ex. var _XMLHttpRequest = XMLHttpRequest; ... include phonegap.js ... Then in your $.ajax function, use 'new _XMLHttpRequest()', instead of XMLHttpRequest, which will be wrapped by phonegap.
        Hide
        Alan Neveu added a comment -

        This is a custom JSON script from Rick Strahl that deals properly with Microsoft formatted dates, in both directions.

        Show
        Alan Neveu added a comment - This is a custom JSON script from Rick Strahl that deals properly with Microsoft formatted dates, in both directions.
        Hide
        Alan Neveu added a comment -

        Here is the serviceProxy function I am using that calls the JQuery $.ajax function. This function, in turn, uses the JSON2.js script that I have attached to this case.

        // *** Service Calling Proxy Class
        function serviceProxy(serviceUrl) {
        var _I = this;
        this.serviceUrl = serviceUrl;

        // *** Call a wrapped object
        this.invoke = function (method, data, callback, error, bare) {
        // *** Convert input data into JSON - REQUIRES Json2.js
        var json = JSON2.stringify(data);
        //json = data;

        // *** The service endpoint URL
        var url = _I.serviceUrl + method;

        $.ajax({
        url: url,
        data: json,
        type: "POST",
        processData: false,
        contentType: "application/json",
        timeout: 20000,
        dataType: "json", // not "json" we'll parse
        success:
        function (res) {
        if (!callback) return;

        // *** Use json library so we can fix up MS AJAX dates
        var result = JSON2.parse(res);
        // *** Bare message IS result
        if (bare)

        { callback(result); return; }

        // *** Wrapped message contains top level object node
        // *** strip it off
        callback(result);
        },
        error: function (xhr) {
        if (!error) return;
        if (xhr.responseText) {
        var err = JSON2.parse(xhr.responseText);
        if (err)
        error(err);
        else
        error(

        { Message: "Unknown server error." }

        )
        }
        return;
        }
        });
        }
        }

        Show
        Alan Neveu added a comment - Here is the serviceProxy function I am using that calls the JQuery $.ajax function. This function, in turn, uses the JSON2.js script that I have attached to this case. // *** Service Calling Proxy Class function serviceProxy(serviceUrl) { var _I = this; this.serviceUrl = serviceUrl; // *** Call a wrapped object this.invoke = function (method, data, callback, error, bare) { // *** Convert input data into JSON - REQUIRES Json2.js var json = JSON2.stringify(data); //json = data; // *** The service endpoint URL var url = _I.serviceUrl + method; $.ajax({ url: url, data: json, type: "POST", processData: false, contentType: "application/json", timeout: 20000, dataType: "json", // not "json" we'll parse success: function (res) { if (!callback) return; // *** Use json library so we can fix up MS AJAX dates var result = JSON2.parse(res); // *** Bare message IS result if (bare) { callback(result); return; } // *** Wrapped message contains top level object node // *** strip it off callback(result); }, error: function (xhr) { if (!error) return; if (xhr.responseText) { var err = JSON2.parse(xhr.responseText); if (err) error(err); else error( { Message: "Unknown server error." } ) } return; } }); } }
        Hide
        Alan Neveu added a comment -

        I figured this out. Turns out the requestHeaders from my custom proxy were not being honored when PhoneGap hijacks the XHR. Using phonegap-1.4.0.js, I added this line of code:

        this.wrappedXHR.setRequestHeader("Content-type","application/json");

        just before line 3796, which is:

        return this.wrappedXHR.send(data);

        and that solved it. Is there any way to craft the PhoneGap function so that it honors the requestHeaders that are already specified on the XHR before it hi-jacks it? That might be a good solution.

        Show
        Alan Neveu added a comment - I figured this out. Turns out the requestHeaders from my custom proxy were not being honored when PhoneGap hijacks the XHR. Using phonegap-1.4.0.js, I added this line of code: this.wrappedXHR.setRequestHeader("Content-type","application/json"); just before line 3796, which is: return this.wrappedXHR.send(data); and that solved it. Is there any way to craft the PhoneGap function so that it honors the requestHeaders that are already specified on the XHR before it hi-jacks it? That might be a good solution.
        Hide
        Jesse MacFadyen added a comment -

        Great! Yeah I can fix that, good find.

        Cheers,
        Jesse

        Sent from my iPhone5

        On 2012-02-03, at 8:31 AM, "Alan Neveu (Commented) (JIRA)"

        Show
        Jesse MacFadyen added a comment - Great! Yeah I can fix that, good find. Cheers, Jesse Sent from my iPhone5 On 2012-02-03, at 8:31 AM, "Alan Neveu (Commented) (JIRA)"
        Hide
        Alan Neveu added a comment -

        Awesome!

        Sent from my iPhone

        Show
        Alan Neveu added a comment - Awesome! Sent from my iPhone
        Hide
        Jesse MacFadyen added a comment -

        also, in the meantime, if you restructure your code to call open()
        before setRequestHeader() it should work.

        Cheers,
        Jesse

        Sent from my iPhone5

        On 2012-02-03, at 8:31 AM, "Alan Neveu (Commented) (JIRA)"

        Show
        Jesse MacFadyen added a comment - also, in the meantime, if you restructure your code to call open() before setRequestHeader() it should work. Cheers, Jesse Sent from my iPhone5 On 2012-02-03, at 8:31 AM, "Alan Neveu (Commented) (JIRA)"
        Hide
        Alan Neveu added a comment -

        Well, it's JQuery that calls the .open so I'd rather leave that part alone. Thanks though!

        AN

        Sent from my iPhone

        Show
        Alan Neveu added a comment - Well, it's JQuery that calls the .open so I'd rather leave that part alone. Thanks though! AN Sent from my iPhone
        Hide
        Jesse MacFadyen added a comment -

        5c2310edb0dfaf19f64cc53c0fea4e6fd080959b

        Show
        Jesse MacFadyen added a comment - 5c2310edb0dfaf19f64cc53c0fea4e6fd080959b
        Hide
        Alan Neveu added a comment -

        Okay, I'm ignorant.. Jesse what exactly is meant by "5c2310edb0dfaf19f64cc53c0fea4e6fd080959b"... Happy to learn, just need a little help.

        Show
        Alan Neveu added a comment - Okay, I'm ignorant.. Jesse what exactly is meant by "5c2310edb0dfaf19f64cc53c0fea4e6fd080959b"... Happy to learn, just need a little help.
        Hide
        Jesse MacFadyen added a comment -

        That was the commit in git.
        You can get the file here:
        https://github.com/purplecabbage/callback-windows-phone/blob/master/framework/js/PGXHR.js
        It has not been rebuilt into phonegap.js, so you will need to do this yourself for your project.

        Show
        Jesse MacFadyen added a comment - That was the commit in git. You can get the file here: https://github.com/purplecabbage/callback-windows-phone/blob/master/framework/js/PGXHR.js It has not been rebuilt into phonegap.js, so you will need to do this yourself for your project.
        Hide
        Alan Neveu added a comment -

        Ahh, I figured as much, thanks!

        AN

        Sent from my iPhone

        Show
        Alan Neveu added a comment - Ahh, I figured as much, thanks! AN Sent from my iPhone
        Hide
        Alan Neveu added a comment -

        Confirming - this commit resolved this problem. Thanks again.

        Show
        Alan Neveu added a comment - Confirming - this commit resolved this problem. Thanks again.
        Hide
        Jesus Bosch added a comment -

        sorry but not working on wp7 with cordova 1.5...

        navigator.notification.alert("readingjson");

        $.support.cors = true;

        $.ajax({
        url: "content.json",
        dataType: 'json',
        success: function (a)

        { navigator.notification.alert("json readed"); }

        });

        navigator.notification.alert('yeah');

        "json readed" alert is never showed... and that json file is being readed without problems on a normal browser or even on iOS version of PhoneGap

        Show
        Jesus Bosch added a comment - sorry but not working on wp7 with cordova 1.5... navigator.notification.alert("readingjson"); $.support.cors = true; $.ajax({ url: "content.json", dataType: 'json', success: function (a) { navigator.notification.alert("json readed"); } }); navigator.notification.alert('yeah'); "json readed" alert is never showed... and that json file is being readed without problems on a normal browser or even on iOS version of PhoneGap
        Hide
        Jesus Bosch added a comment -

        ah, the log says:

        Log:"XMLHttpRequest.open ::: content.json"
        Log:"Wrapped XHR received Error from FileAPI :: [object Object]"

        And cordova is 1.5.0, thanks

        Show
        Jesus Bosch added a comment - ah, the log says: Log:"XMLHttpRequest.open ::: content.json" Log:"Wrapped XHR received Error from FileAPI :: [object Object] " And cordova is 1.5.0, thanks

          People

          • Assignee:
            Jesse MacFadyen
            Reporter:
            Alan Neveu
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development