Moving from page to page creates errors (duplicates?)

Question

I'm trying to use the pushPage() function of the OnsenUI 2 (rc15 as of now). Alongside the OnsenUI, I'm using jQuery 3.

Here is my function that upon clicking certain elements should push a page:

$(".tile_handler").on("click", ".imalink", function () {
    var link = $(this).data().href;
    if(link != null){
        document.querySelector("#myNavigator").pushPage(link, { animation: "slide-ios" });
    }
})

When I push the page for the first time, it works fine. I use the iOS back button to return. Then I click it again and I get this error (and increasingly more as I repeat the process):

[index.js:450] Uncaught (in promise) pushPage is already running.

Here is another function that is supposed to load splitter pages:

$(".splitter_item").click(function () {
    var address = $(this).data('address');
    $('#content')[0].load(address).then(menu.close.bind($('#menu')[0]));
})

When I switch between two pages via Splitter it starts throwing this ( and more every time I switch between pages)

[undefined:1] Uncaught (in promise) Splitter side is locked.

---

What I assume is happening is that I load a page, leave it and when I access it again, it loads the page again. However that doesn't seem to be the behavior shown in OnsenUI examples such as this:

document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'page1') {
    page.querySelector('#push-button').onclick = function() {
      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
  } else if (page.id === 'page2') {
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
  }
});

There is the popPage() function which should delete previously loaded page and would prevent this. But the references don't use it, so I assume I'm doing something wrong. But I don't know what.

---

UPDATE:

I managed to reproduce both problems in CodePen. Here is the Splitter error and here is the pushPage() one. It seems like the pushPage() one is a problem with my function as it adds a pushPage() request every time I click it, not sure why though.

Both errors only seem to happen in Ripple emulator (via VS2015). I don't seem to be able to reproduce them in Android Emulator (but the $(".tile_handler").on("click", ".imalink", function () { code fires incorreclty multiple times anyway). I'm testing this further.

Answer 1

Both errors which you mention are actually a safe measure from you pushing or doing some action twice by mistake if you double click a button/link for example.

They appear when you try to make an action while an animation is running. As you can see in the examples generally there is no problem to push a page twice or more, as long as you start the second push after the first one is finished.

Here are demos with your exact code for both the splitter and navigator.

So the error does not come from the code which you provided, its someplace elsewhere.

The only thing I can come up with is that the behaviour which you mentioned would be seen if for some reason the popPage method failed to finish correctly. Maybe if you provide us with your own codepen where the issue can be reproduced we could debug it further.

An alternative, though highly NOT recommended would be to force the state before you do your action. This however would not be solving the problem, rather only masking it. And of course as with all hacks - it may break in future versions.

myNavigator._isRunning = false;

UPDATE:

Here are the two updated pens which you gave in the comments: https://codepen.io/IliaSky/pen/YWOOkW?editors=1010 https://codepen.io/IliaSky/pen/QEVVGm?editors=1010

Basically you were adding the handlers on init event, which is fired whenever a page is added. so with your logic you are adding more and more handlers with each page. Just make sure you add them only once and you will be fine.

Add things like:

if (e.target.id == 'pagename') ...

or simply

$(document).on("init", '#dashboard_page', function(){ ... }

Answer 2

Basically each time you push a page, that page fires an init event. However Onsen still keeps the initial page in the dom.

Navigator example (the same logic applies to the splitter one):

<ons-navigator>
  <ons-page id="dashboard">
    <div class="imalink" data-href="request_list.html"></div>
  </ons-page>
</ons-navigator>

You have an init event for dashboard. Then you click the tile and go to another page. Then request_list fires its own init event. However our initial page is still in the dom.

<ons-navigator>
  <ons-page id="dashboard" style="display: none">
    <div class="imalink" data-href="request_list.html"></div>
  </ons-page>
  <ons-page id="request_list">
    ...
  </ons-page>
</ons-navigator>

You have something like this. However the following is called a second time:

$(".tile_handler").on("click", ".imalink", function () {
  ...
})

Which adds the listeners once more. $el.on("click") like an alias of addEventListener, meaning you are adding more and more listeners.

So whenever you navigate you keep adding them because the initial page was never removed from the dom.

Alternative solutions:

1. Use only the current page (e.target)

   $('selector') // instead of this   
   $(e.target).find('selector')  // use this
   

   That way you limit to only finding elements within the page which you just created.

2. Enable the handlers from the start. Since you are using jQuery there is actually a simpler way to do the things without relying on the init event.

   Just do this outside of any init handler:

   $(document).on("click", ".tile_handler .imalink", function () { ... })
   

   This actually means that the handler is attached to the document itself and the handler will be called only when the target is .tile_handler .imalink - so it works with any future imalinks which you create.

   This may not be the most efficient approach, but is definitely one of the simplest.

Answer 3

Take a look at .one() from jQuery - the event handler will only execute once per element in order to prevent the error: Uncaught (in promise) pushPage is already running

$(".tile_handler").one("click", ".imalink", function () {
var link = $(this).data().href;
if(link != null){
    document.querySelector("#myNavigator").pushPage(link, { animation: "slide-ios" });
}})