CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
YishaiG
YishaiG

Reputation: 99

Page Change Event

My Fiddle

http://jsfiddle.net/sx9Rt/2/

My problem

I have a page, called page1. After I navigate to page2, I want to CHANGE page1 so that next time it is visited, it will look in a certain way (for example, background-color blue). I want to make this change only AFTER the end of the transition to page2.

I was trying to correctly use the pagecontainerchange event in JQM 1.4 and it wouldn't work for me. I don't want to use the pagechange event because it has been deprecated.

Upvotes: 0

Views: 1250

Answers (3)

Gjermund B. Dahl
Gjermund B. Dahl

Reputation: 1415

Fiddle updated: http://jsfiddle.net/sx9Rt/13/

Use this:

$( ":mobile-pagecontainer" ).on( "pagecontainerhide", function( event, ui ) {
    $("#page1").css('background', 'blue');
});

API doc: http://api.jquerymobile.com/pagecontainer/

Upvotes: 1

ezanker
ezanker

Reputation: 24738

Updated FIDDLE

The pagecontainershow event of the pagecontainer widget runs after the animation to the new page is complete. In the event you can check the toPage or prevPage properties to figure out where you came from and where you are going.

$( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
    var prevPageID =  ui.prevPage.prop("id");
    if (prevPageID == "page1"){
          toDoAfterTransition();
    }
});

Upvotes: 1

Adjit
Adjit

Reputation: 10305

You can use Javascripts setInterval function to check the visibility of the page.

var prevPage;

$(document).on('click', 'a[data-role="button"]', function(){
    prevPage = $(this).parents('[data-role="page"]');

    var checkVisibility = setInterval(function() {
        if(!$(prevPage).is(':visible')) {
            $(prevPage).css('background', 'blue');
            clearInterval(checkVisibility);
        }
    }, 10);
});

Fiddle: http://jsfiddle.net/sx9Rt/11/

Upvotes: 0

Related Questions