CODEWITHSUNDEEP
javascriptjqueryjquery-mobilepopup
Subjective Effect
Subjective Effect

Reputation: 1465

Opening popups in jQuery Mobile 1.4.3 after a page transition

I know this gets asked again and again and I've partially solved it with other answers. I'm stuck now though.

I'm using popups for a tour of an app. The order of events is: 1. Press "Next" button. 2. Close popup 3. Change page 4. Open new popup

You can't chain popups so I'm using afterclose. It works fine for the first transition but after that I get no popup. The console.log in this code gives output.

$('#introPanel1Next').click(function(){
  $('#introPanel1').popup({
    afterclose: function(){
      $(":mobile-pagecontainer").pagecontainer("change", "#page2", {
        transition: "slide"
      }).on( "pagecontainershow", function() {
        $('#introPanel2').popup('open');
      });
    }
  }).popup('close');
});

$('#introPanel2Next').click(function(){
  $('#introPanel2').popup({
    afterclose: function(){
      $(":mobile-pagecontainer").pagecontainer("change", "#page3", {
        transition: "slide"
    }).on( "pagecontainershow", function() {
        $('#introPanel3').popup('open');
      });
    }
  }).popup('close');
});

So I can go from page1 to page2 and have a popup, but even though I can go to page3 introPanel3 does not pop-up.

I thought it might be the event I was listening for (e.g. pagecontainershow) but I've tried them all. Some of them don't give a pop-up on page2 since the page needs to finish loading before the popup("open") is called.

I don't understand why it works for the first transition and popup but not the next (and thus subsequent ones, 5 in total).

With regards to an answer below, I've tried this:

$('#introPanel1Next').click(function(){
  $('#introPanel1').popup({
    afterclose: function(){
      $(":mobile-pagecontainer").pagecontainer("change", "#page2", {
        transition: "slide"
      }).on( "pagecontainershow", function() {
        $('#introPanel2', ui.toPage).popup("open");          
      });
    }
  }).popup('close');
});

It doesn't work. :(

Upvotes: 0

Views: 1415

Answers (1)

Omar
Omar

Reputation: 31732

When pagecontainershow fires the first time, it will open #introPanel2. Afterward, you close that popup and bind another pagecontainershow to open a different popup #introPanel3.

Upon moving to page 3, pagecontainershow will fire, but it will try to open #introPanel2 and then #introPanel3. The result, none of them is open.

You need to check which page is active in order to determine which popup to open. e.g.

$(document).on("pagecontainershow", function (e, ui) {
   var activePage = ui.toPage; /* as of jQM 1.4.3 */
   var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"); /* 1.4.2 and before */

   if (activePage[0].id == "page1") {
      $("#popup1").popup("open")
   }
});

Or, just find popup inside active page and open it.

$(document).on("pagecontainershow", function (e, ui) {
   $(".ui-popup", ui.toPage).popup("open");
});

Demo

Upvotes: 3

Related Questions