Why in the XDK emulator works perfect, but does not work in mobile ?

[Roger_P_]

Dear,
 
Help me, please!  I made a small test with a combo with ajax that brings data to select one of your options. In the emulator XDK, it worked perfectly, but in the mobile only executed the HTML scritps.
Permission tried something, but I do not think I took the right path. Below are the 4 steps I have taken from the beginning to the execution in the emulator:
 
1) I clicked on the PROJECTS tab (below) and include the URLs used by the programs "Domain List":

 
2) Here is the HTML script with the Javascript scripts that make AJAX accessing the database:
 

 
3) Below is the .asp program which is called by ajax in javascript (above the line 31):
 

Note .: See this page, the .asp program (called by ajax) works perfectly: http://www.postosredebrasil.com.br/TEMP/ACESSA.ASP?cFilial=02&nRotina=1
 
4) Below, project screens running in the emulator (put two screens):
 

 

Well, then the question would be this: why in the XDK emulator works perfect, but does not work in mobile?
 
Thank you in advance attention. I await your response!
 
Thank you,
Roger S. Paula Fernandes - Brazil
Intel Green Belt Software Developer

[Elroy_A_Intel]

I recommend not checking the "Allow external domains to launch from this domain" check box. If this doesn't rectify your problem, I suggest adding a * in the Domain List field only which should enable communication with any website or server. This isn't recommended for production application but for testing purposes. 

[Roger_P_]

Dear Elroy Ashtian Jr,

Thanks for listening.

I had tried the way you suggested me. Unfortunately not work. As I have noted, it works perfectly in the emulator, but in the mobile, only work HTML code.

I really enjoyed the XDK and if you can keep trying to help me, thank you in advance.

Roger.

[PaulF_IntelCorp]

Hello Roger, please review the article in this post to be sure you are setting the domain whitelist properly: https://software.intel.com/en-us/forums/topic/559482

The Emulator is a desktop browser, not a device, so it handles CORS or whitelisting differently. Also, on a real device you must wait for the device ready event to happen before you make any calls that are impacted by the Cordova subsystem. See the init-dev.js and init-app.js files in this sample for one way to handle this https://github.com/xmnboy/hello-cordova/ -- those files are also present in your app that you are showing in the screen shot. It appears, from the screen shot, that you are not waiting for the ready event.

[PaulF_IntelCorp · Accepted solution]

Here's the gist of the problem with your app:

• the function you're using (intel.xdk.device.getRemoteData()) is a synchronous function, and it takes at least two minutes to get a response from your server, so the entire webview (runtime) gets blocked when you call that function and wait for a response -- this is the fundamental problem -- do not use that function, it is obsolete
   
• you really should use a standard AJAX call, which is asynchronous and is standard HTML5
   
• an alternative is to use intel.xdk.device.getRemoteDataExt() if you wish to use those functions, but AJAX is a better choice
   
• if you use any intel.xdk function you need to include the appropriate intel xdk plugin to get this API into your built app, they are not automatically included in your builds, they are automatically included in the Emulate tab and when using the Debug tab (in future versions of the XDK this will not be true)
   
• this works in the Emulate tab because it is not performing a synchronous call, it is faking the call with a set of split asynchronous calls that do not block the runtime

[Roger_P_]

Dear Paul,

Your tip "...you really should use a standard AJAX call, which is asynchronous and is standard HTML5..." solved the problem. I developed a routine using HTML, javascript, ajax and could then build the application, it worked!  Now the application has accessed my MySQL database without problems.

Thanks in advance.

[Serguei_S_]

I'm sorry, gents, but the emulator 3400 - wont work perfect. It works worst of all real devices that I test.

That's the other way around, no need to flatter yourselves.

Completely useless instrument unless you built your page following primitive rules.

You cannot include css with JS on domready. It wont affect the rendering. The page is going to have simply no styling.

You cannot load some pictures because no-one knows why, just NW debugger says that it cant.

What you can do is to write your markup classicaly — styles in head js at the bottom and with script and link tag— no JS loading like loadJS or loadCSS (see github).

So what can you do with the tool - nothing. Just forget about it. So rename the title of this very page. People (devs) understand whats going on, and this is a dishonour.

Thanks for your work, though.

[Swati_S_Intel1]

Hello Serguei, sorry to know that things aren't working for you. The current emulator is really a simulator that helps you see how your app would look on devices with different form factors. Some device features are simulated but not all.  A better simulator is in the making and will be available soon. Having said that, it is best to test your app on the device using either test tab or debug tab to get a better idea about how your app will look/perform on the device.

As for your issues -

1) cannot include css with JS on DOMready - The way hybrid apps work is - your device has to be ready before your JavaScript code gets executed, if you try to execute JS code before the deviceReady event it won't get executed. Try to put any CSS changes after deviceReady event (not DOMready) is detected. Please see one of the sample apps for implementation details. 

2) Regarding loading the pictures, I don't get why it won't load pictures in the emulator. Please send the screenshot of the error. Are the assets loaded after the device 

3) Using loadJS or loadCSS - those load JS/CSS asynchronously, which can result in being loaded/executed before the deviceReady event is fired. If your code really requires to load JS/CSS dynamically, you should use synchronous xhr request after the deviceReady event is fired. For other general purpose JS/CSS it is recommended that you use the script and link tag in the head section.

I hope this helps.

[Serguei_S_]

>>SWATI S. (Intel)

Hi there! Thanks for the reply. Yeah, deviceready, but... Im talking about an app whisch doesn't use cordova - you know when you import existing HTML src into a new XDK project you get asked if it's cordova or not. Which is not in my case. Well on Lumia with WP the xap app packed with adobe phonegap build the CSS loads with loadJS, same with samsung android tablet galaxy tab, cant speak of iphone. Thus what i get -

1) with real devices - APK / XAP — (thay have cordova,js) work fine

2) with electron-packager - EXE and linux binary work fine

3) when testing with LAMP - OK

4) testing on nodejs with http-server module - OK

5) testing on XDK - fail loading CSS

Now here's online app demo with the exact source code that is used in above cases so that you can see what's going on

view-source:https://app-englishextra.rhcloud.com/pages/contents.html

There the css is loaded classically with html tag

and at the bottom of the source code you will see the previous commented out code that loaded the CSS with JS

So thats because of deviceready which is probbably discussed there http://stackoverflow.com/questions/12576062/jquery-document-ready-vs-phonegap-deviceready

Then why real devices would work and the XDK emulator should not?

Thanks a lot for future replies.