pushState causing problems


#1

Hi all,
I am struggling with F7 for days now, and seems when i find one workaround i get another problem further down the line. As i checked it’s all caused by pushState set to true (because we want to use back on the mobile app).

So what happens.
I am on index page, then i go to some other page, and when i get back i have two index pages in the DOM, however back goes to 2nd index, not first but data is only populated on first index.

Now wanted to add smartSelect element, as soon as i check couple elements and click ‘Close’ it ‘reloads’ the page and guess what, i have two pages recognitions-add in the DOM.

This is how it looks:

This is how i initialise F7 view (it’s v3)
app.f7View = app.f7App.views.create(’.view-main’, {
domCache: true,
stackPages: true,
pushState: true,
uniqueHistory: true
});


#2

I guess you have some missconfig in your pushState settings and/or routes. Would be good to see more complete example


#3

Thanks,

This is how it’s all defined:

    initializeFramework7: function() {
    app.f7App = new Framework7({
                root: '#app',
                // App Name
                name: 'Mobile App',
                // App id
                id: 'com.act.mobile',
                // Enable swipe panel
                panel: {
                    swipe: 'left',
                },
                // Theme
                theme: 'ios',
                // Add default routes
                routes: [
                    {
                        name: 'profile',
                        path: '/profile/',
                        url: './pages/profile.html',
                        on: {
                            pageBeforeIn: function(e, page) {
                                Profile.getProfile();
                            }
                        }
                    },
                    {
                        name: 'settings',
                        path: '/settings/',
                        url: './pages/settings.html',
                        on: {
                            pageBeforeIn: function(e, page) {
                                Settings.getProfile();
                                Settings.populateNewRegistrationId();
                            }
                        }
                    },
                    {
                        path:'/notifications/',
                        url: 'pages/notifications.html',
                        on: {
                            pageBeforeIn: function (e, page) {
                                Notification.showNotifications();
                            },
                        }
                    },
                    {
                        path:'/alerts/',
                        url: 'pages/alerts.html',
                        on: {
                            pageBeforeIn: function (e, page) {
                                Notification.showAlerts();
                            },
                        }
                    },
                    {
                        path:'/tasks/',
                        url: 'pages/tasks.html',
                        on: {
                            pageBeforeIn: function (e, page) {
                                Notification.showTasks();
                            },
                        }
                    },
                    {
                        name: 'objectives-list',  
                        path:'/objectives2/',
                        url: 'pages/objectives-list.html',
                        on: {
                            pageBeforeIn: function (e, page) {
                                Objective.getObjectivesConfiguration(); 
                            },
                        }
                    },
                    {
                        name: 'objective-view',
                        path: '/objective/:id',
                        url: 'pages/objectives-view.html',
                        on: {
                            pageBeforeIn: function (e, page) {
                                Objective.getObjective(page.route.params.id); 
                            }
                        }
                    },
                    {
                        name: 'objectives-add',
                        path: '/objective-add/',
                        url: 'pages/objectives-add.html',
                        on: {
                            pageBeforeIn: function (e, page) {
                                Objective.prepareObjectiveView('objectives-add');
                            },
                        }
                    },
                    {
                        name: 'recognitions-list',  
                        path:'/recognitions/',
                        url: 'pages/recognitions-list.html',
                        on: {
                            pageBeforeIn: function (e, page) {
                                Recognition.getRecognitionConfiguration(); 
                            },
                        }
                    },
                    {
                        name: 'recognition-view',
                        path: '/recognition/:id',
                        url: 'pages/recognitions-view.html',
                        on: {
                            pageBeforeIn: function (e, page) {
                                Recognition.getRecognition(page.route.params.id); 
                            },
                        }
                    },
                    {
                        name: 'recognitions-add',  
                        path:'/recognition-add/',
                        url: 'pages/recognitions-add.html',
                    },
                ],
                view: {
                    iosDynamicNavbar: false,
                    xhrCache: false,
                },
                photoBrowser: {
                    type: 'popup',
                },
                actions: {
                    convertToPopover: false,
                    grid: true,
                },
                touch: {
                    // enabled for development
                    disableContextMenu: false
                },
                version: '1.1'
            });


            // If we need to use custom DOM library, let's save it to $$ variable:
            app.f7Dom = Dom7;
            app.f7jQ = $;

            // Add view
            app.f7View = app.f7App.views.create('.view-main', {
                domCache: true,
                stackPages: true,
                pushState: true,
                uniqueHistory: true
            });
        },

Pages are loaded this way:

<a href="/recognition-add/">
     <i class="icon fa fa-plus">&nbsp;</i>
     <div class="fab-text">Add Recognition</div>
 </a>

#4

Is it a Cordova app? If not, does it run on server root?


#5

Yes it’s PhoneGap.
For now i removed pushState and set it to false, and registered event listener for backbitten with mainView.router.back() and all working like a charm. Really curious why this pushState behaves like that.


#6

It works wrong in cordova because you need to configure correctly pushStateRoot parameter, try search in forum, there were plenty of similar solutions. But anyway, in cordova app it is better to use backbutton handler