un-manual like behavior for jquerymobile ajax loaded page

Question

So I have a asp.net mvc4 jquerymobile application. Page A has a link to Page B. In the bottom of the PageB.cshtml file, I have the following code

<script type="text/javascript">

    console && console.log("portalUser (index) raw!!");

    $(document).live('pageload'), function () {
        console && console.log("portalUser (index) pageload!!");
    }

    $(document).live('pageinit'), function () {
        console && console.log("portalUser (index) pageInit!!");
    }


    $(document).live('pageshow'), function () {
        console && console.log("portalUser (index) pageshow!!");
    }


    $(document).live('pagechange'), function () {
        console && console.log("portalUser (index) pagechange!!");
    }

    $(document).ready(function () {
        console && console.log("portalUser (index) document ready!!");
    });

</script>

When accessed from PageA (via jqm's ajax loading), the console logs show :

portalUser (index) raw!!
portalUser (index) document ready!!

When accessed at PageB directly :

portalUser (index) raw!!
portalUser (index) document ready!!

Exactly the SAME! Now, according to jqm's own internal documents, we should be using $(document).live(....); to create these bindings.... but my tests show that$(document).ready(function () {}` is the only one that works...

So, have I done something wrong? What am I missing? Thanks!

Please explain what did you expect to see or want to achieve. This so called test shows nothing. jQuery ready handler executes exactly once and not when jQuery mobile is ready. If you need an analog of of DOM ready in jQM after page has been loaded and initialized you need to use `pageinit()` — peterm, Feb 27 '13 at 03:17
thanks peterm. Thats exactly what I'm trying to accomplish. But, as described, the pageinit is failing (total error on my part). The confusing bit about it all is that the DOM ready *is* working in both situations...I did not expect that, per jQm documentation. — reidLinden, Feb 27 '13 at 14:05

score 1 · Accepted Answer · edited May 23 '17 at 12:03

First you have an error on your code, all your normal jQuery Mobile page events don't have closing ); and that is the main reason why you don't have console output.

One more thing, function live is deprecated, use function on instead. Find more about it in my other ARTICLE, to be transparent it is my personal blob. Or find it HERE.

Here's a working example of your code: http://jsfiddle.net/Gajotres/QGnft/

$(document).on('pagebeforeshow', '[data-role="page"]', function(){       
    console && console.log("portalUser (index) pagebeforeshow!!");    
});

$(document).on('pageload', '[data-role="page"]', function(){    
    console && console.log("portalUser (index) pageload!!");
});

$(document).on('pageinit', '[data-role="page"]', function(){    
    console && console.log("portalUser (index) pageInit!!");
});

$(document).on('pageshow', '[data-role="page"]', function(){    
    console && console.log("portalUser (index) pageshow!!");
});

$(document).on('pagechange', '[data-role="page"]', function(){    
    console && console.log("portalUser (index) pagechange!!");
});

$(document).ready(function () {
    console && console.log("portalUser (index) document ready!!");
});

augh! I feel like a moron for missing that! Can't-see-the-forest-for-the- trees problem, I guess.... As far as live vs. on goes, I am aware that live was deprecated, and on should be used, but as the brand nwe 1.3.0 jqm documentation still suggests using live, I thought it was worth a try (http://api.jquerymobile.com/pageinit/). Thanks for your answer, I'll try it out and see what I see. — reidLinden, Feb 27 '13 at 14:13
They have a confusing documentation, at one point they are suggesting us to use a on( and in your case they are still using .live( — Gajotres, Feb 27 '13 at 14:15
I've created a followup question to this on, if you'd like to take a look at it....http://stackoverflow.com/questions/15136983/should-mvc4-partialview-ajax-loading-fire-a-pageinit-event — reidLinden, Feb 28 '13 at 13:41

un-manual like behavior for jquerymobile ajax loaded page

1 Answers1