CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Sithys
Sithys

Reputation: 3783

jQuery-Mobile pagecontainerbeforechange does not fire

i'm working on a single-page-application. I need the pagecontainerbeforechange event from jQuery-Mobile because i want to check if my site-wrapper has the class "show-nav". When the site-wrapper has this class, the site-menu is opened up and the content moves 350px to the left. So if the user now clicks on register, and before he has the site-menu opened up, my register page is moved away and there is no possiblity to get it back because there is no site-menu on the registerpage.

First i tried to use the pagecontainerload event till i saw that it is deprecated. Then i changed it to the pagecontainerloadbeforechange event but i cant get it work.

The page i want to check for the class ".show-nav" has the id #registration

So, the user is on the main site, he clicks on "register" and before the page changes the class ".show-nav" should be removed. The function for removing the class is already set up, but i don't know how to call it the right way.

    function toggleNav() {
        if ($('.site-wrapper').hasClass('show-nav')) {
            // Do things on Nav Close
            $('.site-wrapper').removeClass('show-nav');
        }

More detailed Description ->

While i wrote this detailed Description i got the solution and it is so simple that it is embarrassing for me: Removed the site-wrapper from the site #registration...thats all.

Thanks for your help and thanks for you edit omar!

Upvotes: 0

Views: 326

Answers (2)

gesiud
gesiud

Reputation: 106

pagecontainerbeforechange is part of Pagecontainer Widget.

At this moment (jqm 1.4.x) this widget is designed as a singlton, binded to body element. So if you want to detect page change you should use the code above:

$( "body" ).on( "pagecontainerbeforechange", function( event, ui ) {
    console.log(event);
    console.log(ui);
} );

Upvotes: 0

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

You can add toggleClass to .site-wrapper. If it has the class .show-nav it will remove it, otherwise it will add the class :)

$('.site-wrapper').toggleClass('show-nav');

Upvotes: 1

Related Questions