Touchswipe not initiated correctly after JQM page load

Question

I'm creating a hybrid app using JQM. One of the pages is an image gallery where I use Touchswipe.

If I open the page directly everything works fine. But if I navigate to this page by clicking a link from another page, JQM loads the page using Ajax and swipe is not initialized correctly. If I try to swipe, I get this error:

enter image description here

It only works if I hit F5 and reload the page.

This is the code I use:

$(document).on( "pagecontainerbeforeshow", function( e, ui ) {
  Gallery.init();
});

var Gallery = {
  imgContainer: null,
  (...),

  init: function() {
    this.imgContainer = $('#imageContainer');
    (...)
    console.log('This msg shows');

    this.imgContainer.swipe({
        threshold        : 100,
        triggerOnTouchEnd: true,
        allowPageScroll  : "horizontal",
        swipeStatus      : function (event, phase, direction, distance, duration) {
            Gallery.swipe(event, phase, direction, distance, duration)
        }
    });
  },

  swipe: function(...){
    console.log('I only get this by hitting F5');
  }

};

Any help is greatly appreciated!

It could be that pagecontainerbeforeshow is unable to fire the (Gallery.init();) because the page is not in the Dom yet. change ($(document).on( "pagecontainerbeforeshow") to ($(document).on( "pagecontainertransition") and see if it helps — Tasos, Mar 04 '15 at 21:27
Nope, still get the same error. `Gallery.init()`fires. It even runs `this.imgContainer.swipe()`, but then I get this error. — Steven, Mar 04 '15 at 21:35
check here to see if you have plugins loaded in the correct way -- http://stackoverflow.com/questions/9794927/jquery-mobile-touchswipe-jquery-plugin-errors — Tasos, Mar 04 '15 at 21:40
I wish it was that simple. Unfortunately it's loaded after jQuery and JQM. — Steven, Mar 04 '15 at 21:50

score 0 · Accepted Answer · edited May 23 '17 at 12:06

So it turns out that it WAS the order of the scripts loaded. But not as described in this thread.

Initially I was loading my script on my gallery page:

// Header
<script src=jquery
<script src=jquery.mobile

//Footer
<script src=jquery.touchSwipe

But because JQM retrieves pages using Ajax, touchSwipe is never loaded. So by adding it to my index, it's already loaded when JQM fetches the apge, I still need to "load it" on my gallery page as well, just in case the app is closed and reopened on that page.

Touchswipe not initiated correctly after JQM page load

1 Answers1