CODEWITHSUNDEEP
jquery-mobile
Elad Lachmi
Elad Lachmi

Reputation: 10581

jquery mobile transition event issues

I am creating a jquery mobile site. I am using the latest version of jQ mobile. I have a button on the top bar which opens a menu. The button is available on the homepage only. On other pages a back button takes its place. The menu div is under the page div (think Facebook iphone app).

When I transition to a page without a lot of content, the menu shows under the div of the new page. I went through the jQ mobile docs and found several events that seemed to fit the bill. To the homepage I added this JavaScript:

 <script type="text/javascript">
  $(document).on("pagebeforeshow", function(){
    $('#menu').show();
  });
  $(document).on("pagebeforehide", function() {
    $('#menu').hide();
  });
</script>

I was expecting that beforepagehide will fire before the transition and hide the menu div and that pagebeforeshow would show it again coming back. This is not working. Am I choosing the wrong events? Am I missing something completely about how jQ mobile works?

Edit: I tried modifiying the code like so:

<script type="text/javascript">
    $(document).on("pageinit", function(){
      $('div[data-role="page"]').one("pagebeforeshow", function(event, ui){
          alert("show");
          $('#menu').show();
      });
      $('div[data-role="page"]').one("pagebeforehide", function(event, ui) {
          alert("hide");
          $('#menu').hide();
      });
   });
</script>

I was expecting the above code to bind the event for one execution each time the page is displayed. What I am getting is the "hide" alert twice and then the "show" alert before the page I am transitioning to shows. I have a feeling I'm missing something in the jQuery mobile life cycle.

Upvotes: 1

Views: 355

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Solution

I made an working example for you: jsFiddle

Unlike your example I made a simple div that shows every time during page transitions. You can test it by removing javascript code.

This is js code that hides/shows the custom div:

$(document).on('pagebeforehide','[data-role="page"]',function(e,data){    
    $('#test-div').hide();  
});

$(document).on('pageshow','[data-role="page"]',function(e,data){    
    $('#test-div').show();  
});

There are 3 more events before pagebeforehide. We cant's use them because they would trigger only once before page is loaded into the DOM. First event to trigger every time is pagebeforehide and last event to trigger every time is pageshow.

One more thing not related to this problem, this syntax will not work:

$(document).on("pageinit", function(){
  $('div[data-role="page"]').one("pagebeforeshow", function(event, ui){
      alert("show");
      $('#menu').show();
  });
  $('div[data-role="page"]').one("pagebeforehide", function(event, ui) {
      alert("hide");
      $('#menu').hide();
  });
});

page events can't be serialized like that. Page event can't be a child of another page event.

More information

If you want to find more about this and how page events work then take a loon an ARTICLE in my personal blog.

Upvotes: 1

Related Questions