Back Navigation issue with Query Params

[teknosains]

I have issue with Back navigation if I query params like this

DetailArticle.html?id=45

before, I navigate to : Catagory1.html -> Category 2.html -> DetailArticle.html?id=45

When I hit Back (not browser Back button) on Detail, it goes to Catagory1 instead of Category 2

[rapgithub]

try using it like this < a href="/detail-article/?id=0">l-back</ a >

[teknosains]

@rapgithub u mean like this

<!---back button-->
 <div class="left sliding">
        <a href="Category2.html" class="link icon-only">
          <i class="icon icon-back"></i>
          <!-- @f7-if-ios -->
          <span>Back</span>
          <!-- @f7-endif-ios -->
       </a>
 </div>

yeah, right now I use it instead

[rapgithub]

what version of F7 you use?

read this because i think you are not using the methods in f7 specified for page linking...
https://framework7.io/docs/pages.html

in Page Data Properties
read page.query

and read about
https://framework7.io/docs/router-api.html

View Navigation Methods

you use this mainView.router.loadPage(url) to go to specific page

or this
mainView.router.back(options)

to go back in history

I use this way and works fine!!

[rapgithub]

for linking back in history you can also use just this class="back link"

< a href="#" class="back link"> Back</ a>

or check mainView.router navigation methods for more methods, this link above:

https://framework7.io/docs/router-api.html

I hope you get it resolved! :)

[rapgithub]

check dynamicNavbar is true in your my-app.js

// Add view
var mainView = myApp.addView('.view-main', {
// Because we use fixed-through navbar we can enable dynamic navbar
dynamicNavbar: true
});

i this helps too

[rapgithub]

and for your query when going back try to check this on that page on page init

$$(document).on('page:init', function (e) {
var page = e.detail.page; //contains the page details information of that page
console.log(page.query); //show your query string
});

it should print your query string to the console to see if the query is there
good luck ! :)

[teknosains]

i was using this

< a href="#" class="back link"> Back</ a>

it was no luck...so i use this instead

<!---back button-->
 <div class="left sliding">
        <a href="Category2.html" class="link icon-only">
          <i class="icon icon-back"></i>
          <!-- @f7-if-ios -->
          <span>Back</span>
          <!-- @f7-endif-ios -->
       </a>
 </div>

but i'll check your sugesstions above

[rapgithub]

check dynamicNavbar: true in my case it works fine class back link but if you need to go deeper just use better the mainView.router navigation methods

[teknosains]

yes...I set dynamicNavbar: true already,

[rapgithub]

remember this if you use the router...

use myApp.onPageAfterAnimation

myApp.onPageAfterAnimation(pageName, callback(page)) - "callback" function will be executed after page (with "pageName" data-page attribute) animation

myApp.onPageAfterAnimation('pageName', function (page){
page.view.router.refreshPage();
page.view.router.back({
url: yourpage,
force: true,
ignoreCache: true
})

});

[rapgithub]

force: true,
ignoreCache: true

is important!!

[rapgithub]

myApp.onPageAfterAnimation('pageName', function (page){
page.view.router.refreshPage();
page.view.router.back({
url: yourpage,
force: true,
ignoreCache: true
})

console.log(page.query); //show your query string
console.log(page.view.history); //show your history
});

if you use router back you use it like this :

mainView.router.back({url: 'yourpage.html', force: true, ignoreCache: true,reload: true});

[teknosains]

great....I'll try it....

[teknosains]

@rapgithub

what do u suggest , calling Ajax inside onPageinit or onPageAfterAnimation ?

app.onPageInit('detail', function (page) {
   //ajax call
    __API.detailArticle(page.query.article_id);
});

[teknosains]

none of the above works...here i put my complete code @rapgithub

// Dom7
var $$ = Dom7;

// isCordova helper
var isCordova = !!window.cordova;
var API_URL = 'http://localhost:90/api/article';

// Let's register Template7 helper so we can pass json string in links
Template7.registerHelper('json_stringify', function (context) {
    return JSON.stringify(context);
});

// Framework7 App main instnce
var app  = new Framework7({
    root: '#app', // App root element
    animateNavBackIcon: true, // for iOS dynamic navbar
    material: Framework7.prototype.device.ios !== true, 
    // Don't init automatically
    init: false,
    template7Pages: true,
    template7Data: {},
    swipePanel: true,
    cache:true
});

// Add main view
var mainView = app.addView('.view-main', {
    dynamicNavbar: true
});

var __API = {
    loadByCategory: function(category) {/* web service call*/},
    detailArticle: function(article_id) {/* web service call*/}
};

//Category: mobil
app.onPageInit('mobil', function (page) {
     //init loading ajax
    __API.loadByCategory('mobil');
});

//Category: Motor
app.onPageInit('motor', function (page) {
     //init loading ajax
    __API.loadByCategory('motor');
});

//detail article
app.onPageInit('detail', function (page) {
    __API.detailArticle(page.query.article_id);
});


// Init Framework7 App
if (isCordova) {
    $$(document).on('deviceready', app.init);
}
else {
    app.init();
}

and this detail.html

<div class="page" data-page="detail">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left sliding">
        <a href="#" class="back icon-only">
          <i class="icon icon-back"></i>
          <!-- @f7-if-ios -->
          <span>Back</span>
          <!-- @f7-endif-ios -->
        </a>
      </div>
      <div class="center sliding">Now Reading</div>
    </div>
  </div>
  <div class="page-content">
  .......
 </div>
</div>

I navigate to : mobil.html -> motor.html -> detail.html?id=45

When I hit Back (not browser Back button) on detail, it goes to mobil instead of motor

[rapgithub]

i will check this... what is your issue...

[teknosains]

the issue is still the same

Navigation: Mobil -> Motor -> Detail
When I hit Back (not browser Back button) on detail,
 it goes to mobil and execute it's page:init instead of motor

What i expect when press Back is that it goes back to Previous visited page , the motor page

[rapgithub]

I will check this weekend your code but if you have some extra samples send them to me to check them out and see if i can help you

[rapgithub]

checking it later or tomorrow OK take it easy 👍

[rapgithub]

are you using 1.6.5?

[teknosains]

yaap...im using ver 1.6.5

[rapgithub]

i have tested your code and i can see that the main issue of going back is that maybe you are using the onPageInit callback to know which page you are going back the problem with onPageInit is that if you print the page.name when going back the page.name will always be index not the previous one, dont ask me why but it is so... so you need to use for correct page the onPageAfterAnimation and onPageBeforeAnimation that will always gives you the correct page name regarding how deep you are in the router paths..

i have included here my test code with 3 pages you metioned and it works fine with query parameters as well and with on click events or inline href page references...

I have included the console.log to print the console on every page and show you it works and in the last detail page i have created three links two with inline href links and the other with on click event...

remember when you use on click in pages deeper than index it is better to use this form below to ensure the links are clickable and works...

$$(document).on('click', '.class-name', function (e)

I hope this can solve your issue ! :)

I have commented the lines below in the my-app.js because you do not need this ones but in case you want to test the myApp.onPageInit behavior you can uncomment them to see what i meant with page.name not showing the correct when going back... better use always onPageAfterAnimation and onPageBeforeAnimation for correct page names...

//myApp.onPageInit('index', function (page) {
// console.log('app index page initialized');
//});

...

one important thing the initialization in my case i have added this

var myApp = new Framework7({
init: false, // prevent app from automatic initialization
template7Pages: true,
force: true,
ignoreCache: true,
dynamicNavbar: true,
...

and at the end i initialize it like this

myApp.init();

f7TESTE.zip

[rapgithub]

let me know if you can make it work now :) 👍

[rapgithub]

remember do not use page:init to run things when you want to go back because page.name will always be index use the other methods onPageAfterAnimation and onPageBeforeAnimation in your my-app.js and viola! :)

[rapgithub]

i added page.query to the onPageAfterAnimation methods and the console.log show the query perfectly see this below:

onPageAfterAnimation: function (app, page) {

    if (page.name=='index') {  
    console.log('index page onPageAfterAnimation');
    console.log(page.query); 
    }

    if (page.name=='details') {  
    console.log('details page onPageAfterAnimation');
    console.log(page.query); 
    }

    if (page.name=='motor') {       
    console.log('motor page onPageAfterAnimation');
    console.log(page.query); 
    }

}

[teknosains]

Hi...im soory, have checked it yet.. I'll check it on Monday.... Thanks for the help

[rapgithub]

Welcome!

[nolimits4web]

Issue is closed because of outdated, irrelevant or not actual

If this issue is still actual and reproducible for latest version of Framework7, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue