Do something with DOM7 when navigating to a page

Is it possible with DOM7 to open a tab on a different page? So for example:

$$(document).on('page:init', '.page[data-name="page-one"]', function (e) {
  $$('.page-content').find('#nextPage').on('click', function (e) { 
    app.router.navigate("/page-two/");
    app.tab.show('#tab-2');
  })
})

Of course the above code doesn’t work, but hopefully it helps explain what I am trying to do. :blush:

Only for views as tabs

Ok that was a bad example. I am trying to do something with the DOM once a page has been opened from a specific other page. New example:

$$(document).on('page:init', '.page[data-name="page-one"]', function (e) {
  $$('.page-content').find('#nextPage').on('click', function (e) { 
    app.views.main.router.navigate("/page-two/");
    $$('.hidden-content').removeClass('display-none');
  })
})

For my specific case, I cant show the hidden content when page-two is initialised. I only want the hidden content to be shown when page-two is opened from a specific other page.

Perhaps I can do an IF statement depending on the previous page name? If the statement is TRUE, then the hidden content on page-two will be revealed. But if the statement is FALSE (page-two was accessed from elsewhere in the app) then the hidden content will remain hidden.

I used the following…

var page = e.detail;

…to show me the page details and I can see the previous page name that I would use for the IF statement.

image

I then used the following…

$$(document).on('page:init', '.page[data-name="page-two"]', function (e) {  
 var page = e.detail;  
 var previousPage = page.pageFrom.name;  
 if (previousPage == 'page-one') {        
  $$('.hidden-content').removeClass('display-none');
 }
 ...
})

Is this okay?

Ok, this is why pageFrom exists for

1 Like

Awesome, Framework7 is the best :100: