2

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

The CSS and script are situated in the head of my document. The call script is situated inside the body, but inside the tag.

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.

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.

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

<!DOCTYPE html> 
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">    

    <link rel="stylesheet" href="/templates/assets/css/mobile/swipebox.css" />
    <script src="/templates/assets/js/mobile/jquery.swipebox.js"></script>
</head> 

<body>

<div data-role="page" class="padded-bottom" data-dom-cache="false">

<section data-role="content">


<!--Gallery images-->


</section><!--content-->


<script>
$(".swipebox").swipebox({hideBarsDelay : 0});
</script>

</div><!-- page -->

</body>
</html>

At the moment I have the following in 'Template 1'

<script>

$('#hotel').on('pageload', function() {
$(".swipebox").swipebox({hideBarsDelay : 0});
$(".test").text("jQuery works");
});

</script>

and this for 'Template 2'

<script>

$('#hotel-view').on('pageinit', function() {
$(".swipebox").swipebox({hideBarsDelay : 0});
$(".test").text("jQuery works");
});

</script>

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 :)

Adam
  • 303
  • 4
  • 16
  • As far as I'm aware if you load using Ajax which is when the call will not work. I assume this being due to the fact that onload the query binds to the object where as with Ajax the query loads then the function loads which means the function will not bind to the jquery. I believe to get this to work with Ajax you will need to use live or bind. – Liam Sorsby Dec 12 '13 at 22:00
  • Are you using multi-page model (multi html)? Gallery page isn't the first page? If yes, js library and function should be placed inside page div. – Omar Dec 12 '13 at 22:08
  • Thanks for your input guys. @liam-sorsby so I should keep the call where it is and try firing it from inside a .live or .bind function? – Adam Dec 12 '13 at 22:38
  • @omar yes I am using multi-page and the gallery page in question is not the first page. But if the galley page is refreshed at some point then the problem becomes a possibilty, because it then becomes the 'first page'. – Adam Dec 12 '13 at 22:41
  • It won't work when refreshed because jquery and JQM aren't loaded in head. This is one of multi-page model problems. JQM works much better in single-page model. In fact, it's meant to be used as single-page model. To solve your problem, all html files should contain all CSS links and libraries, extra functions go inside page div. – Omar Dec 12 '13 at 22:46
  • @Omar ok, but that is the current layout of my markup. At the moment all my html files contain a head, with necessary CSS and Script. All call scripts are within the page div, on every page, exactly to the code in my first post. Yet still no luck unfortunately – Adam Dec 12 '13 at 22:53
  • Ok, for the code in page div, wrap it inside `$(document).on("pageinit", "#pageID", function () { //code });`. – Omar Dec 12 '13 at 22:56
  • Thanks Omar, should the code be wrapped on all pages, or just pages that contain the plugin? – Adam Dec 12 '13 at 23:07
  • It depends, you can use other page events, like pageshow, pagebeforeshow, pagehide and pagebeforehide. Pageinit is similar to .ready(). So if you want to initialize swipebox widget every time the page is shown, use pageshow or pagebeforeshow. – Omar Dec 12 '13 at 23:13
  • ok I can't test until I get into the office tomorrow. I will give it a try then and let you know how I get on – Adam Dec 12 '13 at 23:15
  • Pageinit fires once, other events fire when they occur check this http://stackoverflow.com/questions/20457195/setting-up-the-jquery-mobile-script/20459433#20459433 ok good luck. – Omar Dec 12 '13 at 23:18
  • Thank you for the link, but still unfortunately no luck with this. It seems that every time I return to the cached 'first page', the plugin only half fires. The interface for the popup actually displays, just no images are being fired up. I have posted a demo link in the first post if that'll help – Adam Dec 13 '13 at 12:23
  • Ok, progress. With the call inside the page div I wrapped the call script inside a div with the attribute of data-dom-cache. This seems to have it working on all scenarios. I've stripped my templates down but if I can build them back up and its still ok, then I'll let you know – Adam Dec 13 '13 at 15:04
  • You can bind it to `pageshow` if you can provide a demo or a live link, it would be helpful. – Omar Dec 13 '13 at 17:14
  • Demo posted. Thanks for this – Adam Dec 13 '13 at 18:24
  • `pageinit` fires once, bind it to `pageshow`. It will re-initialze thw widget every time the page is shown. – Omar Dec 13 '13 at 19:19
  • But should that code only be included on the pages that are using the widget? I know that my needs to include all styles and libraries regardless of the page, but does this apply for call scripts too? – Adam Dec 13 '13 at 19:26
  • using `pageshow` makes the widget work on first page and any subsequent pages. But then kills it on returning to the first page. Which is a better position than before. Do you know of a conditional I can use to detect whether or the not the page is being initialized for the first time? That way I could bind it to `pageinit` and otherwise bind it to `pageshow` – Adam Dec 13 '13 at 20:00
  • `$(document).on("pageshow", "#pageid", function() {` should be enough. `pagecreate` And `pageinit` will tell that page has been initialized as they fire once only. – Omar Dec 13 '13 at 20:11
  • Still no luck I'm afraid. Have used `$(document).on('pageshow', "#hotel-view", function() {` and also `$(document).bind('pageshow', "#hotel-view", function() {`. It seems that only if you use `pageinit` then the widget will fire on return to the cached first loaded page. `pageshow` doesn;t seem to work when returning to the cached page. Would it make much difference if the page ID was used instead of `document` in the script? – Adam Dec 13 '13 at 20:28
  • I'm afraid that the only way is to use `$.mobile.changePage("URL", { reloadPage: true });` to be used when changing page with forced reload/refresh of the page. – Omar Dec 13 '13 at 20:42
  • You say 'I'm afraid', would using this be a bad thing? What will it do? I assume it would need to go in any page that contains the widget. Would it be part of the same function as the one I'm using or does this code run independent of that. – Adam Dec 13 '13 at 20:52
  • It runs independently, for example you want to move to page X `$.mobile.changePage("x.html", { reloadPage: true });` it isn't bad using it at all, maybe the widget itself needs to be reloaded. Btw, holla at me when you post a comment _@Omar_ – Omar Dec 13 '13 at 20:58
  • @Omar just so I understand, the "x.html" would be the current pages URL? Is there a way to pull the URL using script? I'm thinking for the future, there maybe be dynamic URLs. – Adam Dec 13 '13 at 21:05
  • Any URL. JQM will load it using ajax but without ignoring `head` content as `reloadPage` is true. When it's false, it works as normal JQM anchor (ignores head content). – Omar Dec 13 '13 at 21:12
  • @Omar. Getting some serious strangeness now. Its Friday and I should've finished working long ago. So I tried another lightweight simple lightbox plugin and...it seems to work without any of the problems of the previous widget. All with just a simple call script Could the issue be related to the widget after all – Adam Dec 13 '13 at 21:40
  • It seems so, it seems that that widget needs to be initialized every time the page is shown. I'm glad you finally found a solution. Enjoy your weekend :) – Omar Dec 13 '13 at 21:45
  • @Omar maybe I can sleep now. Thanks for your help on this...I really appreciate it. You have a good weekend also :) – Adam Dec 13 '13 at 22:00
  • It has been a pleasure, I can sleep as well ;) have a nice evening. – Omar Dec 13 '13 at 22:01

0 Answers0