json Calls stoped working

[Miguel_Q_]

Hello.

Suddendly  I can't get my json calls to work.. after update .. i dont understand if is the app preview android app? Because thats the only thing that i updated recenlty! Basically, my $.getJSON calls always falls to the fail callback.. They worked before, oh by the way, testing the "webapp" url on chome browser do work. Its just on this app preview mode that is failling. And the json response on the network panel is okay, returns code 200, and the message is a valid json string...

Something really weird. I tried another stable app, and also does not work anymore. Because the sucess callback is not called... 

[PaulF_IntelCorp]

Hamilton -- I notice that sample project you provided me contains the whitelist plugin in the plugins directory of that app. This is something that you would normally not do, we add that automatically in the build server so you can easily switch between the legacy and the new whitelist plugin. I want you do to an experment:

• go to the plugin management tool and remove the whitelist plugin from your Projects tab
• under the build settings, choose the legacy whitelist option
• build your app and let me know if it works or fails

[PaulF_IntelCorp]

Hamilton -- I was able to make your test app work correctly (in my case, in the Debug tab) by downloading the jQuery 2.2 lib and using that, instead of the jQuery 1.10 lib that is being installed automatically by App Designer. Also, in an App Framework 3 application, App Designer is erroneously including a copy of the old App Framework 2 selector library, which is no longer needed, since AF3 now uses standard jQuery (version 2 is the recommended version). In essence, changes these lines:

        <script type="application/javascript" src="lib/jquery.min.js"></script>
        <script type="application/javascript" src="lib/appframework.js"></script>
        
        <script type="application/javascript" src="app_framework/3.0/appframework.ui.min.js"></script>

to this:

        <script type="application/javascript" src="lib/jquery-2.2.3.js"></script>
        <!-- <script type="application/javascript" src="lib/appframework.js"></script> -->
        
        <script type="application/javascript" src="app_framework/3.0/appframework.ui.min.js"></script>

And don't forget to download the jQuery lib from here > https://code.jquery.com/jquery-2.2.3.js < I am pointing to the unminified copy of jQuery, because there is not not much advantage to using the minified version in a Cordova app, because you load the file locally, not over a network connection. And, it is easier to debug with the unminified copy. Also, the unminified copy doesn't add much additional size to your app, because text files compress very well, and APKs and IPAs, etc. are just ZIP files.

[Hamilton_Tenório_da_]

@Paul> I will try now, upgrading again to 3088. In short time I will send more information here. Thank you.

[Hamilton_Tenório_da_]

@Paul> I made the changes. Good news:

Cordova 5.1.1 / CLI 14

a) OK in Emulate tab.

b) OK in Debug mode!

Looking console, there is this line error:

No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin. whitelist.js:23(anonymous function)

Is it a real problem?

c) OK apk on device (Samsung S4) 

Cordova 5.4.1 / CLI 16

a) OK in Emulate tab.

b) OK in Debug mode!

Looking console, there is the same error:

No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin. whitelist.js:23(anonymous function)

c) OK apk on device (Samsung S4) 

Until now, issue solved!! 

Now I will convert an old app (more complex) and test too. In case of fail (I hope no), I will open a new ticket. Thanks a lot.

[PaulF_IntelCorp]

@Miguel -- thank you for that additional test case! I was able to duplicate the problem with it using the Debug tab AND I was able to fix it using the same solution as I provided to Hamilton. It appears to be a jQuery problem.

Here's the change I made:

    <script src="cordova.js"></script>          <!-- phantom library, needed for Cordova api calls, added during build -->
<!--    <script src="js/jquery-1.8.3.min.js"></script>-->
    <script src="js/jquery-2.2.3.js"></script>
    <script src="js/app.js"></script>           <!-- recommended location of your JavaScript code relative to other JS files -->
    <script src="xdk/init-dev.js"></script>     <!-- normalizes device and document ready events, see README for details -->

Again, I did not use the minified version of jQuery, it's easier to work with the "development" version and there is no performance penalty.

[Miguel_Q_]

Thats strange, since, it worked before... what does cordova has to do with the jquery version? and what makes the debug different from the build version? But well i just hope then that my full app code can be migrated to the version 2.2.3 with minimal impact.

Anyway it does solve my problem, i just hope that there isn't any "under-cover" issue, that could affect another thing beyond this. 

;) Thanks for the help, i can resume my project.

[PaulF_IntelCorp]

@Miguel -- I'm suspecting this has something to do with the new whitelist plugins, but I'm not sure. It could also be a race condition in jQuery, and this is why you see it fail under some conditions and not under others (so far we've seen it be dependent on Debug or Built and also on specific devices -- don't know precisely how to guarantee what causes it). Note that the jQuery site only tests jQuery 2 in Cordova/PhoneGap apps (the XDK builds Cordova apps). See the How to Use It section of this blog > https://blog.jquery.com/2013/04/18/jquery-2-0-released/

@Hamilton -- here is some code to experiment with, I was able to make it work with jQuery 1.x as well as 2.x, based on some StackOverflow posts which are partially related. You can give this a try, I've removed your URL data, you'll have to put it back in. I'm providing this so others can also see what happens. In essence, there are two different responses being checked for, a jQuery 1.x response and a jQuery 2.x response.

function jqueryAjaxTest() {

     /* button  #botRunAjax */
     $(document).on("click", "#botRunAjax", function (evt) {
         console.log("function started");
         var wpost = "e=132&c=abcdef&s=demoBASICA";
         $.ajax({
             type: "POST",
             crossDomain: true, //;paf; see http://stackoverflow.com/a/25109061/2914328
             url: "http://your.server.url/address",
             data: wpost,
             dataType: 'json',
             timeout: 10000
         })
         .always(function (retorno, textStatus, jqXHR) { //;paf; see http://stackoverflow.com/a/19498463/2914328
             console.log("jQuery version: " + $.fn.jquery) ;
             console.log("arg1:", retorno) ;
             console.log("arg2:", textStatus) ;
             console.log("arg3:", jqXHR) ;
             if( parseInt($.fn.jquery) === 1 ) {
                 switch (retorno.status) {
                    case 0:
                    case 200:
                        console.log("exit OK");
                        console.log(JSON.stringify(retorno.responseJSON));
                        break;
                    case 404:
                        console.log("exit by FAIL");
                        console.log(JSON.stringify(retorno.responseJSON));
                        break;
                    default:
                        console.log("default switch happened") ;
                        console.log(JSON.stringify(retorno.responseJSON));
                        break ;
                 }
             }
             if( (parseInt($.fn.jquery) === 2) && (textStatus === "success") ) {
                 switch (jqXHR.status) {
                    case 0:
                    case 200:
                        console.log("exit OK");
                        console.log(JSON.stringify(jqXHR.responseJSON));
                        break;
                    case 404:
                        console.log("exit by FAIL");
                        console.log(JSON.stringify(jqXHR.responseJSON));
                        break;
                    default:
                        console.log("default switch happened") ;
                        console.log(JSON.stringify(jqXHR.responseJSON));
                        break ;
                 }
             }
             else {
                console.log("unknown") ;        
             }
         });
     });
 }

[PaulF_IntelCorp]

@Hamilton -- regarding the "No Content-Security-Policy meta tag found." error, add this to your <head> section to eliminate that annoyance. What I am providing is not the safest choice. Technically, you should configure it for your app's needs:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' 'unsafe-inline' data: gap: https://ssl.gstatic.com * ">

For more details about CSP and the whitelist settings see:

• http://www.html5rocks.com/en/tutorials/security/content-security-policy/
• https://software.intel.com/en-us/articles/cordova-whitelisting-with-intel-xdk-for-ajax-and-launching-external-apps

[Diogo_A_]

Same thing happened to me recently, after some update (cant say for sure when).

External requests work in both emulate tab and in the compiled APK, but will fail on the debug module with that same error Hamilton is getting ("No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.")

Adding the above "meta" tag in head did not solved it: it still does not work, but now strangely I dont even get the whitelist.js error, it just fails silently.

Im pretty jure my content policies are set right, since after all it does works in the APK and it used to work on the debug tab too. There is something broken in App Preview

[Diogo_A_]

Just a follow up: using weinre, I can see the same "No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin." warnings while testeing the compiled APK. But the calls are working in spite of this.

Its pretty weird

[PaulF_IntelCorp]

Diogo -- what you are seeing in the console is a warning from the new Cordova whitelist plugin that is incessantly reminding you to use a CSP header to secure your app. Personally, I think they are going overboard with that log message, because it seems to go on forever, I think a few logs would be sufficient.

It appears that they got the message and have removed that annoyance from the April 15 release of that plugin, you can read about it here > https://issues.apache.org/jira/browse/CB-10624. I'll request that our build system upgrade to this version of that plugin (it's a special plugin that is handled automatically by the XDK). In the meantime, I recommend that you do configure a CSP tag in the head section of your app. Note, the correct CSP tag is highly dependent on the needs of your app.

[PaulF_IntelCorp]

Diogo -- just a gut feeling, not sure if this will fix the Debug tab issue, but try adding this to your whitelist rules:

<access origin="cdvfile://*" />

Based on reading this thread > https://github.com/markmarijnissen/cordova-app-loader/issues/39

[Nasiru_Abdullahi_T_]

Ajax call fails in my Intel XDK hybrid mobile App, pls any help?