App breaks when initializing FormData Object

[Patrick_C_1]

 Hello!

My colleague and I switched to POST request recently. That isn't the problem, it works really fine, but now there is a problem which I can't solve. In the Emulator and if I debug the app on a device while it is connected with the computer, all works fine. But if I test the app in the App Previewer, the app breaks on the line where I initialize the FormData JS object. That's strange, because, as far as I remember, it worked already with one test POST request, but now it seems not to work at all. Here's the script snippet where the request would be send. I really don't know how to solve that problem, and we don't really want to go back to GET.

var xhr = new XMLHttpRequest();

    _USER = document.getElementById("username").value;
    var pass = md5(document.getElementById("password").value);
    xhr.open("POST", _URL + "app_login.php", false);
    
    var formData = new FormData();
    formData.append("user", _USER);
    formData.append("pass", pass);
    formData.append("os", intel.xdk.device.platform);
    formData.append("os_ver", intel.xdk.device.osversion);
    
    xhr.send(formData);

    responselogin = JSON.parse(xhr.responseText);
    if (responselogin != 99) {
        session = true;
        _UID = responselogin[0].user;
        initProjectspage();
    } else {
        session = false;
    }  

I'm sure there is a solution for that problem. And by the way, why do Apple devices response with null if calling intel.xdk.device.platform or osversion? Its not a problem, I'm just interested in. 

[Chris_P_Intel]

Are you sure it is failing on new FormData() ?

If I had to guess, I would imagine it is failing on responselogin = JSON.parse(xhr.responseText);   If I remember correctly, the response won't be on the xhr object. Or, if it is, asynchronously, not until the response is received.

xhr.onreadystatechange = function () {

    if (xhr.readyState === 4) {

      console.log(xhr.response);
   }
}

[Patrick_C_1]

Yes, I'm pretty sure it is failing on new FormData(), because when I add a console widget to the login page and add a console.log() before and after all the FormData stuff, I only get the one before the new FormData(). And the request is right, because at w3schools is a example, where the xhr.responseText is also get after send (synchronously). I also tried to run the request asynchronously, but I get the same result - it stops before the new FormData().

[Chris_P_Intel]

If you are using the console widget, then you can type   var x = new FormData() right in the console and then evaluate x.  Take a look.

[Patrick_C_1]

If I do this, I get following message:

ReferenceError: Can't find variable: x

[PaulF_IntelCorp]

did you include the "var" in front of the "x"?

[Patrick_C_1]

Yes. I've also tried it in the Emulator - which is certainly unnecessary, but the strange thing is, that in the emulator I get back, that x is not defined, in opposite to the App Previewer on my phone, where I get back, that x can't be found.

[PaulF_IntelCorp · Accepted solution]

The "emulator" is just a variant of the Chromium browse. App Preview runs you code in the embedded webview on that device. The behaviors will not match. See this blog for a little background: http://blogs.intel.com/evangelists/2014/09/02/html5-web-app-webview-app/ -- the Emulate tab is useful for quick debug of the logic in your program, but for real testing and debug you need to use a real device.

What doesn't make sense is that typing "var x = new FormData()" on the console gives you a "can't find variable x" message. You should get "undefined" if the "FormData()" function does nothing, does not exist or returns nothing. The "can't find variable x" points to not using the "var" modifier to make sure the variable exists.

BTW -- intel.xdk.device.osversion and other "intel.xdk" namespace methods and properties only exist on a real device if you have included the appropriate xdk plugin. Otherwise they will cause your code to stop if you reference those items without including the appropriate plugin. In general, we recommend you not use them, as they have been deprecated. That could the source of the problem you are having.

Another way to get that information without using the intel.xdk namespace is to include the Cordova device plugin and use this code:

    if( window.device && device.cordova ) {                             // old Cordova 2.x version detection
        console.log("device.cordova: "  + device.cordova) ;          // print the cordova version string...
        console.log("device.model: "    + device.model) ;            // on Cordova 3.0+ these require that
        console.log("device.platform: " + device.platform) ;         // the Cordova Device plugin is installed
        console.log("device.version: "  + device.version) ;          // if not, they will not exist
    }

"device.version" will give you the OS version number for the platform and "device.platform" will tell you if it is Android, iOS, etc.

[Patrick_C_1]

Thank you so much, that is the solution for my problem. Never thought of that, I even didn't know that the intel.xdk.device is outdated, but learning never stops.