Html5boiler Plate + Jquery Mobile = Scripts Loading Twice

July 02, 2024 Post a Comment

I am working on an experimental jquery mobile based app using html5 boilerplate as a base for html and such. Basically all I have done thus far is: Download and extract html5 boil

Solution 1:

Modernizr uses YepNope to load scripts. If you take a look at the issue here: https://github.com/SlexAxton/yepnope.js/issues/10

you'll see that scripts are intentionally loaded twice:

Yepnope does request every file you put into it twice. The first time it loads itself into your cache as some sort of non-executable entity (an object element, or an img element, or a script element with a fake type attribute, depending on your browser). The second time it's injected, we inject it as an executable script, and this time it's cached. So there is really only the millisecond or less that it takes to execute the callback function and reinject a script tag extra (and however long it takes to access the cache).

There's also mention of this on the http://yepnopejs.com home page. Just go there and scroll down to I'm seeing two requests in my dev tools, why is it loading everything twice?

Solution 2:

Putting your <script>document.ready()</script> in <head></head> will fix this problem.

Solution 3:

Are you using $(document).ready()??

Ran into this same issue and was frustrated to no end, noticed that if I moved all the JS to the head of the document it worked fine. When I switched everything to use pageinit started working properly with JS at bottom of page where it belongs.

example:

<divid="mainPage"data-role="page"><scripttype="text/javascript">
        $("#project_map_page").live('pageinit', function() {
        // INSERT JS HERE
        });
    </script></div>

further details available at: http://jquerymobile.com/demos/1.0/docs/api/events.html

Solution 4:

I tried adding jQuery and jQuery Mobile on a basic html page, it seems to happen like this as well. So don't think it's h5bp related. Could you try strip out the h5bp stuff and load again?

Solution 5:

Make sure your root div is like this...

<body><divdata-role="page"><!-- Content --></div></body>

Html5 World