Question

I must miss a really simple thing here, because it seems so obvious…and I can’t believe I can’t find anything on the web for this!

I’m trying to use the jQuery mobile library to make a mobile view of my website.

I have three pages (data-role) in my page. Two with static content and the second with content I wish to load with ajax. The home page have the link to the other two pages:

<div data-role="page" id="home">
    <div data-role="header" id="header">
        <h1>the header</h1>
    </div>
    <div data-role="content">
        <a href="http://absolutepathtomyserver/homepage#highlights" data-role="button">highlights</a>
        <a href="http://absolutepathtomyserver/updatePlaylistTemplate#playlist" data-role="button" rel="external">playlist</a>
    </div>
</div>

<div data-role="page" id="highlights">
    <div data-role="content">
        <p class="center">My static content</p>
    </div>
</div>

<div data-role="page" id="playlist">
    <div data-role="content"><!-- TO BE FILLED FROM AJAX! --></div>
</div>

From my understanding of the many tutorials I read, by default all a href links execute an ajax call unless specified otherwise, but it is not working. When I click on the highlight link, the page is slide like expected without loading any other page since it is the same page. Everything is fine here. But when I click the playlist page, the slide animation is executed but the ajax call is never made so the content of playlist is never filled. Note that I monitor the network calls but none are made when I click on the link.

What did I missed?

Is it my absolute call? I use the tag base url for static content so the links must be absolute throughout all my application.

Do I need to use the .bind method?

Do I need to make the ajax call manually? I can do it, but from I read it seems to be native to href link in the mobile exetension…

Answer 1

Option 2 with a bit of tweeking. I don’t know why but as is, the callback function in your code seems too fast because no content is filled, though the content is taken from the back end. I can see the call in my network inspector. Also there was missing ” ‘ “s in the second selector.

Here is the working code:

$('#playlist').bind('pageshow', function () {
    $.ajax({
        url: 'updateplaylist.html',
        success:function(data, textStatus, jqXHR){$('#playlist').find('[data-role="content"]').html(data);}
    }); 
});

I still wonder why the option 1 did not take the right url. I am also afraid that doing my ajax call manually I will skip the default spinner of the jquery mobile framework. Locally it is too fast I don’t see it anyway.