Clear history on PageInit

Questions
1

Hi All,

I have a scenario where i need to clear all history on event of particular router.

I tried to clear history using query which is not working.

{
     path: '/',
     url: './index.html',
     name: 'home',
     on:{
         pageAfterIn: function() {
             app.view.main.history.pop();
             $('.page-previous, .navbar-previous').remove();
         }, pageInit: function(){
             app.view.main.history.pop();
             $('.page-previous, .navbar-previous').remove();
         }
 }

@nolimits4web Can any one help on this?

2

Donā€™t really understand what you are trying to achieve but there is a reloadAll option that you can pass to router.navigate. It will clear the history and load the page as the only one

3

Hi @nolimits4web,

In my case when user come to home page, then he shouldnā€™t go back.

I am using anchor tag for navigation. so user can come to home page form any other page like below.
eg;
home page -> page1 -> home page
home page -> page1 -> page2 -> home page
home page -> page1 -> page2 -> page3 -> home page
home page -> page2 -> page3 -> home page
home page -> page3 -> home page

I canā€™t put router.navigate on all pages because it should support history back for other pages.

4

This is works for me:

$('.page-previous, .navbar-previous').remove();
app.view.main.history = ['/']; // url of the home pagec
app.view.main.router.history = ['/'];
5

Check the 2.0.10 release, there is a new clearPreviousHistory router method and app parameter that can remove all previous pages

6

Hi @nolimits4web,

I tried with app.router.clearPreviousHistory=[]. But still no luckā€¦ When i use app.router.back() still application going previous page

7

It is a method app.router.clearPreviousHistory()

1 Like
8

Hi @nolimits4web,

When i am calling app.router.clearPreviousHistory() its giving below error.

framework7.js:7193 Uncaught TypeError: Cannot read property 'length' of undefined
    at t.clearPreviousHistory (http://framework7.io/dist/js/framework7.min.js:12:105739)
    at <anonymous>:1:12clearPreviousHistory @ framework7.js:7193(anonymous function) @ VM84:1
9

Hi @nolimits4web,

Can you help to resolve this. All my app functionalities depends in this.

10

How do you use it? Try also

<a href="/" data-clear-previous-history="true">Home</a>
1 Like
11

Hi @nolimits4web,

Thanks for your quick replyā€¦

I can implement given snippet half places only.

Is there any way to clear history on particular pageInit event using js?

12

Not on pageInit, but can be on pageAfterIn

13

@nolimits4web,

Thatā€™s fine for meā€¦ Can you tell how we can achieve this on pageAfterIn

While i am trying app.router.clearPreviousHistory() its giving above mentioned error

14

This is what is perfectly works in Kitchen Sink:

  {
    path: '/',
    url: './index.html',
    name: 'home',
    on: {
      pageAfterIn(e, page) {
        page.router.clearPreviousHistory();
      },
    },
  },
3 Likes
15

Perfect @nolimits4webā€¦ :tada:

16

thanks @nolimits4web your code work for me. Made my day.
Thank you so much

17

Hi, I have issues with page init event.
I have a page ā€œTaskDetailsā€ that run an ajax call when user open that page

$(document).on(ā€˜page:initā€™, function (e, page) {
var task_id = page.route.query.task_id;
myAjaxCall(task_id);
)}

When open Taskdetail run one time. If user go back and the open TaskDetail again run 2 times, and so on, every time open TaskDetail add a new page init event and run as times as he opens taskdetail. How can I destroy page init to avoid run many times.

Regards

18

Hello, you can try something like this , assuming you have the main view structured like this

<div id="fetchView" class="view view-main">
       <div class="page" data-name="fetch_task_detailsPage">
            <!-- your fetch details content here -- >
       </div>
</div>

then initialize your view and attach the page init , this will ensure that the event fires only once for that page


var view = app.views.create('#fetchView', {
  on: {
    pageInit: function ( page ) {
      if( page.name === "fetch_task_detailsPage" ) {
          // try adding your logic here this will ensure that the code fires only once on view init
     }
    }
  }
})

Please let me know if this helps, nice tym