Question

I am using JQuery Mobile for an application. While it is a great framework, there are some nuances that I’m learning about. Currently, I have a two page application. When a user navigates to a the second page, I interact with a web service. If the web service returns a success, I load the second page. If the web service returns a failed message, I want to show them a dialog with a prompt. To do that, I’m currently doing the following:

my.js

$("#page2").live("pageshow", function () {
  var isGood = getResult();
  if (isGood == false) {
    $.mobile.changePage("/myDialog", { role: "dialog" });
  }
  else {
    // Continue loading page2 related information
  }
}); 

Currently, this logic works almost as I need. The dialog appears. However, when I close it, the “pageshow” event for “page2” fires again. Thus, loading the dialog again. Essentially, I have an infinite loop. I’m not sure how to get around this. It almost like a dialog is loaded into the DOM completely on its own instead of in relation to the page. Because of that, I’m not sure how to respond to dialog events or interact with it. How do I get around this?

Thank you

Answer 1

I’m not sure if this is the best way to do this, but it should work:

var dialogShown = false;

$("#page2").live("pageshow", function () {
  if(dialogShown)
    return;
  var isGood = getResult();
  if (isGood == false) {
    $.mobile.changePage("/myDialog", { role: "dialog" });
    dialogShown = true;
  }
  else {
    // Continue loading page2 related information
  }
});