jQuery mobile ajax not loading

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开发者_JAVA百科 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...

The jQuery Mobile ajax-link handling applies to pseudo-pages that are not already specified in your document. If you want to ajax-load a page from the link on your home pseudo-page then omit the playlist pseudo-page from the document. jQuery Mobile will go to the url specified in the link, grab all the content within the data-role="page" element, add it to the dom automatically, and transition to the newly added page.

Another route is to load data through an ajax call when the playlist page is displayed like so:

$('#playlist').bind('pageshow', function () {
    $.get('url_to/get.php', function (data) {
        $('#playlist').find('[data-role="content"]').html(data);
    });
});

The above example reloads the html in the data-role="content" element within the playlist pseudo-page every time it is shown. You could alternitively use pagecreate or one of the other jQuery Mobile events.

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.