StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>To understand this problem you need to understand how jQuery Mobile works. </p> <p>Your first problem is point where you are trying to initialize JavaScript. From your previous answers I can see you are using several HTML/ASP pages and all of your javascript is initialized form the page <code><head></code>. This is the main problem. Only the first HTML file should have JavaScript placed into the <code><head></code> content. When jQuery Mobile loads other pages into the DOM it loads only the <code><div></code> with a <code>data-role="page"</code> attribute. Everything else, including <code><head></code>, will be discarded. </p> <p>This is because currently loaded page has a <code><head></code> already. No point in loading another pages <code><head></code> content. This goes even further. If you have several pages in a second HTML file, only the first one is going to be loaded.</p> <p>I will not try to invent warm water here so here are links to my other 2 answers discussing this problem. Several solutions can be found there:</p> <ol> <li><p><a href="https://stackoverflow.com/a/15806954/1848600">Why I have to put all the script to index.html in jquery mobile</a> (or in <a href="http://www.gajotres.net/how-jquery-mobile-page-handling-affects-javascript-executions/" rel="nofollow noreferrer">this blog article</a>)</p></li> <li><p><a href="https://stackoverflow.com/a/17403907/1848600">Link fails to work unless refreshing</a></p></li> </ol> <p>There's more then enough information there to give you an idea what to do.</p> <p>The basic solutions to this problem are:</p> <ol> <li>Put all of your JavaScript into a first HTML/ASP file</li> <li>Move your JavaScript into <code><body></code>; to be more precise, move it into a <code><div></code> with <code>data-role="page"</code>. As I already pointed out, this is the only part of a page that is going to be loaded.</li> <li>Use <code>rel="external"</code> when switching between pages because it will trigger a full page refresh. Basically, you jQuery mobile that the page will act as a normal web application.</li> </ol> <p>As Archer <a href="https://stackoverflow.com/questions/17405013/javascript-in-jquery-mobile-not-working-unless-i-refresh/17405355#17405355">pointed out</a>, you should use page events to initialize your code. But let me tell you more about this problem. Unlike classic normal web pages, when working with jQuery Mobile, document ready will usually trigger before page is fully loaded/enhanced inside the DOM. </p> <p>That is why page events were created. There are several of them, but if you want your code to execute only once (like in case of document ready) you should use the <a href="http://api.jquerymobile.com/pageinit/" rel="nofollow noreferrer"><code>pageinit</code></a> event. In any other case use <code>pagebeforeshow</code> or <code>pageshow</code>. </p> <p>If you want to find out more about page events and why they should be used instead of document ready take a look at this <a href="http://www.gajotres.net/document-onpageinit-vs-document-ready/" rel="nofollow noreferrer">article</a> on my personal blog. Or find it <a href="https://stackoverflow.com/a/14469041/1848600">here</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload