Back Button Not workign on IOS initially

Paul_Hughes · August 28, 2020, 3:54pm

I have and app with back buttons just using the classes “link back” this works fine in browser and android, also the android back button seems to be working correctly but on iPhone when I navigate from the home page to any page after launching the app the back button doesn’t work but if I go to a second page the back button will work, once but it will never bring me back to the index page.

My route.js file below so for example, I launch the app and go to log-call.html the back button doesn’t work, if I go to another page e.g. activity-overview.html’ the back button will bring me back to log-call.html but again won’t work to bring me back to index.html. From the index.html page only 3 pages can be accessed (log-call.html, activity.html, & messages.html) and the behaviour is the same if they are the first page accessed the back button doesn’t work but if the are accessed from one of the other pages back will work. I can visit multiple pages and back will work all the way back to the second page but never bring me to the index.html

var routes = [
{
    path: '/',
    url: './index.html',
    name: 'home',
},
{
    path: '/log-call/',
    url: './pages/log-call.html',
    name: 'log-call',
},
{
    path: '/activity-overview/',
    url: './pages/activity-overview.html',
    name: 'activity-overview',
},
{
	path: '/activity-logged/',
	url: './pages/activity-logged.html',
	name: 'activity-logged',
},
{
	path: '/activity-on-site/',
	url: './pages/activity-on-site.html',
	name: 'activity-on-site',
},
{
	path: '/activity-completed/',
	url: './pages/activity-completed.html',
	name: 'activity-completed',
},
{
	path: '/messages/',
	url: './pages/messages.html',
	name: 'messages',
},
{
	path: '/popup-log-call/',
	popup: {
		content: `
		<div id="popup-log-call" class="popup popup-tablet-fullscreen">
		<div class="view">
			<div class="page">
				<div class="third title-box title-box">
					<a href="#" class="link popup-close back-arrow"></a>
					<span class="pg-title"></span> 
				</div>
				<div class="two-third"></div>
			</div>
		</div>
	</div>`
	}
},
{
	path: '/popup-call-detail/',
	popup: {
		content: `
		<div id="popup-call-detail" class="popup popup-tablet-fullscreen">
			<div class="view">
				<div class="page">
					<div class="third title-box">
						<a href="#" class="link popup-close back-arrow"></a>
						<span class="pg-title"></span> 
					</div>
					<div class="two-third"></div>
				</div>
			</div>
		</div>`
	}
},
{
	path: '/popup-filter/',
	popup: {
		content: `
		<div id="popup-filter"  class="popup popup-tablet-fullscreen">
			<div class="view">
				<div class="page">
					<div class="third title-box filter-title-box">
						<a href="#" class="link popup-close back-arrow"></a>
						<span class="pg-title">
							<span class="title-icon">Filter</span>
							<span class="sub-title">(Tick as many boxes as relevant and search)</span>
						</span>      
					</div>
					<div class="two-third"></div>
				</div>
			</div>
		</div>`
	}
},

]

nolimits4web · August 28, 2020, 6:16pm

Move home page content to other file, not index.html

Paul_Hughes · September 1, 2020, 10:20am

I’ve tried moving eveything from index.html to home.html that didn’t work as cordova was looking for index.html/ I also tried moving just the .page div to home.html and leaving everything else in index.html but just got a blank page on load. I’m not sure what way to do this and how to adjust the route accordingly.

Don’t I need to have an index.html, what should be in the index.html and what should i move to a separate file?

Sorry quite new to Cordova and Framework 7 just following the tutorials and documentation.

nolimits4web · September 1, 2020, 10:49am

You should move only content of the page into home.html file like you do with other pages. Everything else should be kept in index.html. Here is doc on how to make routable home (initial) page https://framework7.io/docs/view.html#initial-page-route

Paul_Hughes · September 1, 2020, 12:11pm

I’ve done this but I am still getting a blank page, also confused as to where to put my Toolbar as “we must leave View blank” and to have “one common toolbar for all pages in View then it must be a direct child of this view and be BEFORE all pages in view”

My index.html

<body>

    <div id="app">

        <div class="view view-main"></div>

    </div>

    <script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
    <script src="cordova.js"></script>
    <script type="text/javascript" src="js/routes.js"></script>
    <script type="text/javascript" src="js/my-app.js"></script>
    <script type="text/javascript" src="js/api.js"></script>

</body>

My routes.js

var routes = [
{
    path: '/',
	url: './home.html',
	name: 'home',
},
{
    path: '/log-call/',
    url: './pages/log-call.html',
    name: 'log-call',
},
{
    path: '/activity-overview/',
    url: './pages/activity-overview.html',
    name: 'activity-overview',
},
{
	path: '/activity-logged/',
	url: './pages/activity-logged.html',
	name: 'activity-logged',
},
{
	path: '/activity-on-site/',
	url: './pages/activity-on-site.html',
	name: 'activity-on-site',
},
{
	path: '/activity-completed/',
	url: './pages/activity-completed.html',
	name: 'activity-completed',
},
{
	path: '/messages/',
	url: './pages/messages.html',
	name: 'messages',
},
{
	path: '/popup-log-call/',
	popup: {
		content: `
		<div id="popup-log-call" class="popup popup-tablet-fullscreen">
		<div class="view">
			<div class="page">
				<div class="third title-box title-box">
					<a href="#" class="link popup-close back-arrow"></a>
					<span class="pg-title"></span> 
				</div>
				<div class="two-third"></div>
			</div>
		</div>
	</div>`
	}
},
{
	path: '/popup-call-detail/',
	popup: {
		content: `
		<div id="popup-call-detail" class="popup popup-tablet-fullscreen">
			<div class="view">
				<div class="page">
					<div class="third title-box">
						<a href="#" class="link popup-close back-arrow"></a>
						<span class="pg-title"></span> 
					</div>
					<div class="two-third"></div>
				</div>
			</div>
		</div>`
	}
},
{
	path: '/popup-filter/',
	popup: {
		content: `
		<div id="popup-filter"  class="popup popup-tablet-fullscreen">
			<div class="view">
				<div class="page">
					<div class="third title-box filter-title-box">
						<a href="#" class="link popup-close back-arrow"></a>
						<span class="pg-title">
							<span class="title-icon">Filter</span>
							<span class="sub-title">(Tick as many boxes as relevant and search)</span>
						</span>      
					</div>
					<div class="two-third"></div>
				</div>
			</div>
		</div>`
	}
},
]

My my-app.js

var app = new Framework7({
    root: '#app',
name: 'Jones Engineering Services Call Out',
    id: 'com.joneseng.servicescallout',

    panel: {
	    swipe: 'left',
    },
    touch: {
        materialRipple: false
    },
    view: {
        pushState: true
    },
    routes: routes,
});

var mainView = app.views.create('.view-main',{
    url: '/'
});

nolimits4web · September 1, 2020, 12:20pm

Then attach your device to mac and debug it via Safari to know what is happening (there should be some errors).

If it is common toolbar for all pages in View then you can keep it inside of the View. By “we must leave View blank” means there shouldn’t be pages

Paul_Hughes · September 1, 2020, 12:30pm

No errors, just blank/empty view div (has toolbar now)

nolimits4web · September 1, 2020, 12:42pm

Refresh the page and check your Network tab and what is in console?

Paul_Hughes · September 1, 2020, 12:46pm

nolimits4web · September 1, 2020, 1:05pm

This should be disabled in cordova app

Paul_Hughes · March 4, 2021, 10:16am

Sorry for bringing up an old issue, but this solution worked for me but on Android the Android device back button now closes the app.