Search code examples
jquerycordovaonsen-ui

Onsen UI Navigator from Jquery

i had a navigator with interacts with some pages. I am trying to use jquery instead onf angular. Googling i had found a solution to modify the selected page html with this code:

ons.ready (function (){
    $(document).on('ons-navigator:postpush', 'ons-navigator', function(event) {
        //Do something
    });
});

How could i set up this for an specific html page(because the code above is for all page the navigator changes to).

Thank you in advance

Solution

  • Check the postpush event in Onsen UI docs: http://onsen.io/reference/ons-navigator.html#event-postpush

    There are useful parameters you can use for that such as event.enterPage and event.leavePage.

    Also, you can get the current page with myNav.getCurrentPage()and the entire page stack with myNave.getPages(). More info in the previous link.

    Hope it helps!

    Edit:

    Looks like the original event is wrapped in another object.

    ons.ready (function (){
  $(document).on('ons-navigator:postpush', 'ons-navigator', function(event) {
      event = event.originalEvent;

      // Do something
      console.log('From',event.leavePage.name, 'to', event.enterPage.name);
   });
});

    Working here http://codepen.io/frankdiox/pen/doMdbw