jquery mobile pageinit not seeing div

Question

I think I'm missing something really basic here, so please point me in the right direction!

jquery mobile is loading my pages, but in addition to this on each page I have a secondary ajax call which loads a section of the page.

The first pageload works fine (as you'd expect), the ajax call loads and applies the results to the correct div. However when I navigate to another page on my site, my ajax call fires, I get a response, I select the div however it's not applying the result of the ajax call to the html content of the div, which I find a little odd.

I call the setupLogin() function in the head and it does fire correctly on every pageinit:

function setupLogin() {
console.log('calling my ajax...');
    var request = $.ajax({
        url: '/ajax-file.php',
        type: 'GET',
        dataType: 'html'
    });
    request.done(function(msg) {
console.log('got ajax result: '+msg);
        $('#page-header').html(msg); // <- this is doing nothing after initial pageload
var div = $('#page-header');         // <- so I added this line
console.log(div);                    // <- and this line to check it's grabbing the div ok
    });
}

$(document).delegate("body", "pageinit", function(event) {
    setupLogin();
});

The console log lines output exactly as I'd expect:

console.log('got ajax result: '+msg) logs the correct output of the /ajax-file.php call, so I know the ajax call is working perfectly.

console.log(div) logs:

[div#page-header, context: document, selector: "#page-header", constructor: function, init: function, selector: ""…]
    0: div#page-header
    context: document
    length: 1
    selector: "#page-header"
    __proto__: Object[0]

Which I assume means it's found the div correctly, and I get no errors at all. Everything loads ok, apart from the contents of msg aren't added to the html content of $('#page-header') in the $('#page-header').html(msg); line.

I assume it's something to do with how jquery loads the page? Could it be applying the $('#page-header').html(msg); line to the previous page, before it's loaded the new page into the DOM? In which case how do I fire this event after everything's fully loaded? I thought that was what pageinit did, or am I mistaken?

UPDATE

@Brad M The contents of the ajax response is just pure html:

<div id="page-header-top">
    <div id="h_logo"><a><span id="redLogo"></span></a></div>
    <div id="h_login"><a href="/w/touch/banking"><span id="bankingBtn" class="">Banking</span></a></div>
    <div id="h_games"><a href="/w/touch/games/"><span id="allGamesBtn" class="">All Games</span></a></div>
    <div id="h_home"><a href="/w/touch/home"><span id="homeBtn" class=""></span></a></div>
</div>
<div id="page-header-bottom" class="small"><b>User Name &pound;0.00</b><a href="/?logout=true" data-ajax="false"><span class="logout-btn">Log out</span></a></div>

Also, have you tried declaring the `dataType` property as `text/html`? — Brad M, Mar 20 '13 at 15:11
@BradM it's just html, I've added the output to the question for you — Stu, Mar 20 '13 at 15:12
Check in your page source if content was added to your header — Damian0o, Mar 20 '13 at 15:13
@BradM, sorry typo, `dataType: 'html'` is in there, it works the first time and I'm getting the response back fine both the first pageload and subsequent pageloads — Stu, Mar 20 '13 at 15:14
Try to invoke $('#page-header').page() - and see this [topic](http://stackoverflow.com/questions/4039428/jquery-mobile-dynamically-creating-form-elements) — Damian0o, Mar 20 '13 at 15:16
@Damian0o `$('#page-header').page()` seems to hide the div, just looking up if I'm using it in the right place! — Stu, Mar 20 '13 at 15:23
Try to invoke that method also at your data-role="page" element (of course). Since you are trying to add dynamic element jQuery mobile should parse your whole view. So maybe try to refresh page or reload it. — Damian0o, Mar 20 '13 at 15:25
@Damian0o I don't have a `data-role="view"` element, just looked it up, all I can find is it referenced to Kendo UI, I've not heard of that before. — Stu, Mar 20 '13 at 15:28
@Damian0o `$("#page").trigger("pagecreate");` doesn't seem to have any effect either — Stu, Mar 20 '13 at 15:32
@Damian0o Refresh will work, as everything works on the first pageload, however that kind of defeats the point of using the jquery transitions heh... I'll keep thinking! — Stu, Mar 20 '13 at 15:33
@Gajotres yes, the #page-header div exists on every page, it contains a loading gif until the ajax call should overwrite it. — Stu, Mar 20 '13 at 15:35
Than that is your problem, you are appending it to the previous page. Dont forget, your previous page is still in the DOM. Change $('#page-header').html(msg); with : $.mobile.activePage.find('#page-header').html(msg); — Gajotres, Mar 20 '13 at 15:37
@Gajotres I suspected that's what may be happening, thanks, I just didn't know about .activePage! Add that as an answer and I'll accept :) — Stu, Mar 20 '13 at 15:39

score 4 · Accepted Answer · answered Mar 20 '13 at 15:41

4

Change:

$('#page-header').html(msg);

to a:

$.mobile.activePage.find('#page-header').html(msg);

In your case, header content has been applied to the first page (still loaded inside the DOM).

answered Mar 20 '13 at 15:41

Gajotres

57,309
16
102
130

1

cheers :) I need to do a lot more reading up on jquery mobile methinks ;) – Stu Mar 20 '13 at 15:48

jquery mobile pageinit not seeing div

1 Answers1