Databases
StackOverflow2013
Postsdbo
POjQuery Mobile script not loading on DOM cached page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Mobile script not loading on DOM cached page
    text
    copied!<p>I'm really hoping someone can help me out with this. I have been experimenting with jQuery Mobile and have run into a problem. The problem is regarding a jQuery lightbox called Swipebox. The plugin itself works fine to a point so I'll highlight when it doesn't work</p> <p>The CSS and script are situated in the head of my document. The call script is situated inside the body, but inside the tag.</p> <p>The only time it doesn't work is if the page itself acts as the 'first page'. On the initial load, it works. But then if I navigate away from that page and return via AJAX loading, then the plugin stops working. </p> <p>I don't know an awful lot about jQuery Mobile at the moment but I assuming that when the 'first page' is loaded for the first time (or refreshed possibly), it gets cached. Hence why when returning to the first page, from another page, the loading time is instant. But unfortunately it seems to totally break or not include the script.</p> <p>Is anyone able to point me in the right direction with this. A basic layout of my markup is below. Any advice would be much appreciated</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Title&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="/templates/assets/css/mobile/swipebox.css" /&gt; &lt;script src="/templates/assets/js/mobile/jquery.swipebox.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page" class="padded-bottom" data-dom-cache="false"&gt; &lt;section data-role="content"&gt; &lt;!--Gallery images--&gt; &lt;/section&gt;&lt;!--content--&gt; &lt;script&gt; $(".swipebox").swipebox({hideBarsDelay : 0}); &lt;/script&gt; &lt;/div&gt;&lt;!-- page --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>At the moment I have the following in 'Template 1'</p> <pre><code>&lt;script&gt; $('#hotel').on('pageload', function() { $(".swipebox").swipebox({hideBarsDelay : 0}); $(".test").text("jQuery works"); }); &lt;/script&gt; </code></pre> <p>and this for 'Template 2'</p> <pre><code>&lt;script&gt; $('#hotel-view').on('pageinit', function() { $(".swipebox").swipebox({hideBarsDelay : 0}); $(".test").text("jQuery works"); }); &lt;/script&gt; </code></pre> <p>This makes the plugin work perfectly on 'Template 2' regardless of how its loaded. But the plugin is also being used on 'Template 1'. Under the 'Insider' tab. It seems the plugin cannot work perfectly on both pages. The problem has progressed rather than been solved :)</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