CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
cattyWashington
cattyWashington

Reputation: 91

jquery mobile pageshow event is not firing on first page

I am new to jquery mobile frame work.On my observation i am not able to fire pagebeforeshow event on the first page of my document

Could anyone faced the same issue.Please suggest me the steps to trigger the event or any other alternative

Upvotes: 2

Views: 5153

Answers (3)

Brad G.
Brad G.

Reputation: 311

Another alternative that works well for me and doesn't require other event handlers so all my pageshow binds are in one place is to simply create a dummy first page that will immediately change to the first visible one:

<div id="start" data-role="page" data-title="App Title"></div>
<div id="realFirstPage" data-role="page">
   ...
</div>

Then at the end of the document.ready function, simply do this:

setTimeout(function() {
    $.mobile.changePage($("#realFirstPage"), {
        transition: 'pop',
        changeHash: false
    });
}, 100);

Upvotes: 1

Kulbhushan Chaskar
Kulbhushan Chaskar

Reputation: 353

It may happen because jquery dom model is not ready for the first time to fire page show event for the first page, So try include (bind pageshow event) in pageinit event, it works for me...

$(document).on("pageinit", "#pageId", function(e){
    console.log( ' Inside the  pageinit event' );
    $(document).on("pageshow", "#pageId", function(e){
         // code for page show event
  });
         // code for pageinit event
  });

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34107

demo http://jsfiddle.net/yNzzG/

In the demo you will see alert when pagebeforeshow handler will get triggered.

Rest code will make it clear, hope it helps,

code 

$(document).bind('mobileinit', function() {
    alert('mobileinit');
});

$(function() {
    var selector = ':jqmData(role=page)';
    $('body').on('pageinit', selector, function(e, data) {
        // initialize page
        var $page = $(this);
        alert('init ' + $page.attr('id'));
    }).on('pagebeforeshow', selector, function(e, data) {
        // showpage
        var $page = $(this);
        alert('show Page before Show Stuff == > ' + $page.attr('id'));
    });
    $('#page1').on('pageinit', function(e, data) {
        // setup handler
        var $page = $(this);
        $page.find('.colorchanger').click(function() {
            var $content = $page.find('.ui-content'),
                isBodyC = $content.hasClass('ui-body-c');
            $content.toggleClass('ui-body-c', !isBodyC).toggleClass('ui-body-e', isBodyC);
        });

    });
});

Upvotes: 2

Related Questions