jQuery mobile ajax not loading

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...

Jasper · Accepted Answer · 2011-09-01 16:07:41Z

3

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.

edited Sep 1, 2011 at 16:07

answered Aug 30, 2011 at 18:15

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Guillaume Bois Over a year ago

Firstly thank you for your answer. Your answer explore two options

Guillaume Bois Over a year ago

Firstly thank you for your answer. Your answer explore two options. Option 1 is to remove the div id playlist in my html for the library to create it on the fly while gathering the data from my server. This did not worked. It is indeed making a call to the back end to a wrong url, instead of calling the url specified in the href it is calling the index#playlist, so the page reload inside the newly created div id playlist. Bad... Option 2 ended up working with a bit of tweeking. See my answer

Guillaume Bois · Accepted Answer · 2011-08-31 14:07:39Z

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.

answered Aug 31, 2011 at 14:07

Guillaume Bois

1,3413 gold badges17 silver badges23 bronze badges

3 Comments

Jasper Over a year ago

Here's a documentation link to jQuery's get method: api.jquery.com/jQuery.get. It's shorthand for the same function you are using above. Also as for loading spinners, check-out the Methods and Utilities page of the jQuery Mobile documentation to learn how to show/hide the loading spinner: jquerymobile.com/demos/1.0b2/docs/api/methods.html

Guillaume Bois Over a year ago

Yes the short hand get method is usefull for some people. But in my case I need the full version because I want to handle the appearance of the spinner as in: beforeSend:function(){$.mobile.showPageLoadingMsg();}, complete:function(){$.mobile.hidePageLoadingMsg();},

Jasper Over a year ago

Before you call the $.get method, call the spinner to view, then in your callback function remove the spinner from view... $.mobile.showPageLoadingMsg(); $.get('url', function () {$.mobile.hidePageLoadingMsg();});

Collectives™ on Stack Overflow

jQuery mobile ajax not loading

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related