CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
varuog
varuog

Reputation: 93

JavaScript does not run on first load if I include the jquery.mobile-1.4.3.min.js library

I am facing a very strange problem where my javascript code does not run the first time the page is loaded. If I reload/refresh the page, the script runs fine.

After some hit-and-trial's I realized that if I remove the jquery.mobile-1.4.3.min.js library from the previous page (which redirects to my current page) then the script is running as expected.

Can anyone please help on why this is occurring and how can I resolve it ?

Update: On opening the hpme page (which contains the link to the page containing the JS), I can see the following error in console: Uncaught TypeError: Cannot set property 'mobile' of undefined .

Please note that this home page is basically a simple code with library declarations and html links.

Edit : I had missed the jQuery lib earlier and hence the Uncaught TypeError. Now, my libraries are in the following order :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />

Now there are no errors in my console, but still the JS in the next page does not run in the first load. Oddly, if I remove the jquery.mobile-1.4.3.min.js library, the JS works fine.

Upvotes: 1

Views: 1682

Answers (1)

Omar
Omar

Reputation: 31732

Single Page Model

jQuery Mobile loads external pages via Ajax; when you have a link to another page, jQM loads first page div <div data-role="page"> in that page and neglects other tags outside that div.

If you have JS code that you want to run in the loaded page, you have to place it inside page div.

<div data-role="page">
   <!-- JS code -->
</div>

Upvotes: 1

Related Questions