On certain devices javascript files don't load if included in html pages loaded via ajax calls

Marco_L_ · ‎02-27-2015

I'm trying to port an existing HTML5 webapp to iOS and android tablets using intel-xdk, while maintaining as much as possible of the original codebase. I've tried to recreate the problem I'm having on a barebone html5 app starting from the basic template.

index.html:

<head>
    <!-- intelxdk stuff -->
    <script type="text/javascript" src="js/init.js"></script>
</head>
<body>
    <div id="preHome">Before Content</div>
    <div id="home"></div>
    <div id="postHome">After Content</div>
</body>

js/init.js:

$(document).ready( function (e) {
    $.ajax({
        url:"modules/module1.html",
        success:function(data){
            console.log("init.js: ajax call succeded");
            $("#home").empty();
            $("#home").append(data);
        },
        async:true
    });
});

modules/module1.html:

<script type="text/javascript">
     console.log("module1.html: code in <script> working fine");
</script>
<script src="js/module1.js"></script>
<div>Module 1 loaded!</div>

js/module1.js:

console.log("module1.js loaded");
$(document).ready(function () {
   console.log("module1.JS document ready fired!");
});

What I expect is that the "module1.js" script should be loaded (and executed) when the content is appended to the home div. This works fine on the original webapp on all browsers, and in the intel-xdk emulator. It also works fine on the app preview on an iPad 2 running iOS 7.1.2 but doesn't work on two other devices (one is an iPad 3 retina the other one I'm not sure) running the same iOS version, the code in module1.js never executes.

What happens on those devices is that the module1.html is loaded, the code in the <script></script> tag executes just fine, but it hangs for 4-5 seconds before appending the content and never executes the code in module1.js. I've tried debugging the problem for a while now but haven't got a clue of what is going on and why the problem occurs only on certain devices, any input would be appreciated.

PaulF_IntelCorp · ‎03-09-2015

The technique you are using does not always work well in Cordova apps. When you use the XDK you are creating a Cordova app. Best practice recommends creating a "single-page app" that does not rely heavily on the availability of a network interface at init time. See this doc for a quick review of best practices: http://cordova.apache.org/docs/en/4.0.0/guide_next_index.md.html#Best%20Practices