Closing jQuery Mobile new popup cause page to refresh uselessly

9
votes

I'm using the new jqm popup with the 1.2.0 alpha release and my problem is that my page from which I call the popup is refreshed uselessly when closing the popup using esc key or clicking on the screen... This refresh happen only the first time I close it. If I reopen and close again the popup the page is not refreshed...

It seems that for some reason jqm history mecanism get messed up....

It don't seem to be a built-in feature because this does not happen for any popup in the jqm demo page.

Any idea how to solve this issue?

Thanks

Etienne

5
jquery-mobile
I've experienced similar issues when the current url isn't in sync with the navigation stack. You'll notice that the _handleHashChange event triggers the "navigate" event ($.mobile.pageContainer.trigger(navEvent);), and the expected listener which evaluates isDefaultPrevented to true, doesn't get triggered because it is only bound once. Depending on my time this week, I may submit a pull request. I will keep you posted. – nullable

5 Answers

23
votes

I had a similar problem and, as I did not need to use history in my case, I solved it disabling globally popup history like this:

$.mobile.popup.prototype.options.history = false;
5
votes

Found this post while having a similar problem on IE11 with jQuery Mobile 1.4.5

I found that I could prevent the "reload" when closing the popup by declaring the popup with the data-history="false" attribute in my HTML.

Ex:

...

3
votes

Per my comment, here's a temporary workaround to the issue. Just appropriately bind to the navigate event and call preventDefault. This will prevent the reloading of the page. I ended up binding to the popupafterclose, only when it's been opened:

  $('.my-popup-selector').on('popupafteropen', function () {
      $(this).one('popupafterclose', function () {
          $(window).one('navigate.popup', function (e) {
              e.preventDefault();
          });
      });
  });
0
votes

I had a similar problem and I fixed it with using history: false:

$("#selector").popup({ transition: 'slidedown', history: false, overlay: true });
$("#selector").popup("open");
0
votes

Add data-history="false" to popup div. thus when popup closes it doesn't redirect to another page .