Home/ Questions/Q 8360901
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T11:34:30+00:00

Ok so I have started using jQuery Mobiles pre-fetch abilities. I’m using the link

  • 0

Ok so I have started using jQuery Mobiles pre-fetch abilities. I’m using the link method specified on this page http://jquerymobile.com/test/docs/pages/page-cache.html. The only problem is my swipe code fails to see the pages that were brought in via the pre-fetch. Please see this js fiddle for a working example of the problem.

http://jsfiddle.net/UurQC/1/

Any one have any thoughts as to what to try to get .next to find the new pages. I have also tried targeting them via

div.ui-page

And it still comes up as an empty selector in firebug.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The issue is that you are attempting to select the next DOM element, not the next pesueo-page element. Since you are adding the last page after the DOM loads, it’s actually being added after another element (so .next() is selecting this other element instead of the pseudo-page).

    I changed:

    $(this).next("div:jqmData(role='page')");
$(this).prev("div:jqmData(role='page')");

    To:

    $(this).nextAll("div:jqmData(role='page')").first();
$(this).prevAll("div:jqmData(role='page')").first();

    Which selects all the previous/next pseudo-pages and then selects just the first of those.

    Here is a demo: http://jsfiddle.net/UurQC/2/

    If you don’t delegate the event handlers for the swipe events then the swipe event handlers won’t run for the dynamically placed pseudo-page. Here’s how to fix that:

    $(document)
    .on("swipeleft", "div:jqmData(role='page')", function(){
        var $nextPage = $(this).nextAll("div:jqmData(role='page')").first();
        // swipe using id of next page if exists
        if ($nextPage.length > 0) {
            $.mobile.changePage($nextPage, { transition: 'slide' });
        }
    })
    .on("swiperight", "div:jqmData(role='page')", function(){
        var $prevPage = $(this).prevAll("div:jqmData(role='page')").first();
        // swipe using id of next page if exists
        if ($prevPage .length > 0) {
            $.mobile.changePage($prevPage, { transition: 'slide', reverse : true });
        }
    });

    And here is a demo: http://jsfiddle.net/UurQC/3/

    UPDATE

    Here is what the DOM looks like and why the above is necessary:

    <div data-role="page" id="text_0" data-url="text_0" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 452px; "></div>
<div data-role="page" id="text_1" data-url="text_1"></div>
<div data-role="page" id="text_2" data-url="text_2"></div>
<script type="text/javascript">...</script>
<div data-role="page" id="text_3" data-url="text_3"></div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"></div>

    Note that this is not the full HTML but only the direct children of the <body> element.

    Notice that the dynamically created pseudo-page is added to the DOM after JSFiddle added your JS code in a <script> tag. This will be an issue when not run on JSFiddle as well, as jQuery Mobile adds a loader element as it initializes.

    • 0