iScroll Not Loading On A Hashed Link In jQuery Mobile

Question

I've set up an iScroll on a nested div in one of my detail pages in a jQuery mobile site. Basically what happens is when I click on the button on the main page (for an 'about' page) it goes to the location with a hashed link (using Ajax from what I've gathered). Example:

http://www.example.com/#about.php (this doesn't work with iScroll, BTW this is obviously not a real URL, just an example of syntax)

Basically when I load the URL by itself (as a non-hashed link), the iScroll works fine, but when it's loaded from clicking from the main page the iScroll doesn't load and isn't working. Example:

http://www.example.com/about.php

How do I get the anchor for the <li> to link to the direct link and not the hashed link OR is it better to learn how to get the iScroll javascript to load in the Ajax loaded link? Thanks for the help.

UPDATE:

Here's the syntax I've used for the listview that I have linked to the about page. It's the basic listview syntax that I've seen used everywhere I've read up on it. All I'm dealing with is the fifth link right now (ABOUT). I'm not using a hash in the anchor and yet it still links it to a hashed location. What's interesting is that it's not http://www.example.com/index.php#about.php it's just http://www.example.com/#about.php.

<ul data-role="listview">
        <li><a href="#nav1">TEST</a></li>
        <li><a href="#nav1">TEST 2</a></li>
        <li><a href="#nav1">TEST 3</a></li>
        <li><a href="#nav1">TEST 4</a></li>
        <li><a href="about.php">ABOUT</a></li>
 </ul>

Answer 1

I'm guessing that you are binding the iScroll initialization within a document.ready handler. If this is the case then you need to change that to a delegated event handler (this is standard jQuery Mobile practice):

$(document).delegate('#about-page-id', 'pageinit', function () {
    var myScroll = new iScroll('id-of-element');
});

Important: Use pageInit(), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

Source: http://jquerymobile.com/demos/1.0/docs/api/events.html

Long story made short: jQuery Mobile uses AJAX to pull new pages into the DOM, this has a number of side-affects.

1. All IDs must be unique site-wide since multiple pages can be in the DOM at once.
2. When linking to an external page (<a href="about.html">About</a>) only the data-role="page" element and its descendants will be grabbed (everything else will be ignored).
3. You cannot rely on $(document).ready() because pages grabbed through AJAX do not fire this event, they fire page events as specified here: http://jquerymobile.com/demos/1.0/docs/api/events.html

If you want to force a reload when linking to another page there are several options:

1. Put rel="external" on the link tag:`
2. Put data-ajax="false" on the link tag: <a data-ajax="false" href="about.html"></a>
3. Globally disable AJAX handling of links: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

But note that using any of these methods will disable transitions.

UPDATE

If you are getting hashed links that means that either you turned off the historyPushState functionality or you are using an old version of jQuery Mobile. If you are using an old version I highly reccommend upgrading to 1.0 (there are lots of performance increases in 1.0 RC3 and 1.0 Final): http://jquerymobile.com/download/