[SOLVED] [V.3.0] Dynamic content on index.html disappears when coming back from third page

In my index.html, there are list of restaurant which is fetched from server database. On clicking a restaurant, user goes to restaurant details page (i.e. 2nd page) and then clicking the link on 2nd page, user goes to 3rd page. Now when click the ‘back link’ on top, they come to second page and then again clicking “back link” comes to index page but the content on index page (i.e. list of restaurant) disappears.

There are many solutions posted here on this forum which are of old framework7 version so none of them works for me.

I am using latest version of framework7 - v.3.0

In my index.html, I have this-

<div class="hotellist"></div>

And in my App.js, I have -

 // Dom7
    var $$ = Dom7;
    // Theme
    var theme = 'auto';
    if (document.location.search.indexOf('theme=') >= 0) {
      theme = document.location.search.split('theme=')[1].split('&')[0];
    }
    // Init App
    var app = new Framework7({
      id: 'io.framework7.testapp',
      root: '#app',
      theme: theme,
      data: function () {
        return {
          user: {
            firstName: 'John',
            lastName: 'Doe',
          },
        };
      },
      view: {
        iosDynamicNavbar: false,
        xhrCache: false,
      },
      methods: {
        helloWorld: function () {
          app.dialog.alert('Hello World!');
        },
      },
      routes: routes,
      vi: {
        placementId: 'pltd4o7ibb9rc653x14',
      },
      
    });
        
    var view = app.views.create('.view-main', {
        	url: '/',
    });    
        app.request.post('http://localhost/foodonline/listhotel.php', 
        	{ index: 'default' }, 
        	function (data) {
        		var data = data;
        	  $$('.hotellist').html(data);
        	});

Rest of my html pages are through route,js

Please suggest. Thanks

Because your app.request.post... won’t happen again if you back to home page. You need to put this logic to home page’s pageInit event/callback, or enable stackPages: true on View initialization to keep previous pages in DOM

Thanks. pageInit solved the issue. Last time before asking the question, I have tried pageInit by doing -

$$(document).on('page:init', '.page[data-name="home"]', function (e) { ....... });

So it didn’t work. This time after your answer I tried again without adding .page[data-name.....] and it worked.

Thanks.

i was getting the same error, but this solve my problem, i added stackPages: true on View initialization like so: view: { pushState: true, stackPages: true, },

i’m currently on cloud 9, i’m so happy i solved the bug i’ve been battling over one week

Hi [Amusa-Paulos] I followed your solution but didn’t work
here is a link to my code