PhoneGap/cordova issue with RequireJS's text plugin

Question

I'm trying to get a simple web project running via PhoneGap. The site uses RequireJS to load modules asynchronously. It also has Handlebars templates which I'm loading via the RequireJS text plugin.

The site works fine when served from a local HTTP server. However on the device it fails to render. Debugging on PhoneGap is tricky (though can be done to some extent), but as far as I can tell, the issue is related to the loading of these templates using the RequireJS text plugin.

The weinre-based debugger provided by PhoneGap shows an error string in the console:

JSCallback Error: Request failed.

Can anyone recommend a solution?

Prattle

Was having a similar issue, then it turned out to be my dumbness :) I didn't copy over my template folder.... So txt plugin for rquirejs works fine for me under cordova. Found this nice tutorial as well... appliness.com/… – Zandrazandt

One tricky thing I have noticed, is that in phonegap running on iOS device, the paths used in require/define array are case sensitive, while in Chrome desktop browser, the case does not seem to matter. Could be something like that? – Blackleg

Though I have run in to this issue before and was testing on Windows Phone 7 and on Android, this should give you some insight. #13039073 Hope that helps. Cheers! Suj – Headstand

"On the device", can you be more specific?? Android/iOS? This error is thrown when the request's statuscode != 200 or 404, which will probably be either a 500(internal error) or a 403(unauthenticated). Are the templates on a remote server or are they included in your PG www folder? I've seen these errors before, where someone forgot to grant INTERNET-permission on Android.. – Rotative

Answer 1

the text plugin can create problems when, for example, the templates are hosted on a different domain from the one which is running the javascript. in that case, due to security restrictions in cross origin requests, the plugin will assume that you are downloading the compiled version of your templates, and append .js to the file locator.

if you have control of the server, you can check if the wrong path is requested.

Museology

Answer 2

Use safari to debug the site on your mobile device / simulator, and it should tell you exactly which request is failing in the network tab.

See http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/

Alexandros