Hello!
Without an Internet connection, the transition to other pages stops working. Please tell me what could be the reason. I’m making a hybrid mobile app. I use framework 7 v3.5.1. Async routes are used to navigate between pages. I use the router component pages.
Application initialization occurs under the cordova ondeviceready event. This is how I initialize my app:
var app = new Framework7({
// App root element
root: ‘#app’,
// App Name
name: ‘Remmy’,
// App id
id: ‘com.endi.remmy’,
//App version
version:‘1.0.0’,
//App theme
theme: ‘auto’,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled rendering pages using Template7
template7Pages: true,
// Add default routes
routes: [
{
path: ‘/’,
url: ‘./index.html’,
},
{
path: ‘/settings/’,
async: function (routeTo, routeFrom, resolve, reject) {
var whiteList = JSON.parse(storage.getItem('whiteList'));
var blackList = JSON.parse(storage.getItem('blackList'));
var archive = JSON.parse(storage.getItem('archive'));
resolve(
{
componentUrl: './pages/settings.html',
},
{
context: {
blackList: blackList,
whiteList: whiteList,
archive: archive,
}
}
);
},
},
{
path: '/toPerform/',
async: function (routeTo, routeFrom, resolve, reject) {
resolve(
{
componentUrl: './pages/toPerform.html',
},
{
context: {
}
}
);
},
},
{
path: '/groupParticipation/',
async: function (routeTo, routeFrom, resolve, reject) {
resolve(
{
componentUrl: './pages/groupParticipation.html',
},
{
context: {
}
}
);
},
},
{
path: '/inviteFriend/',
async: function (routeTo, routeFrom, resolve, reject) {
resolve(
{
componentUrl: './pages/inviteFriend.html',
},
{
context: {
}
}
);
},
},
{
path: '/feedback/',
async: function (routeTo, routeFrom, resolve, reject) {
resolve(
{
componentUrl: './pages/feedback.html',
},
{
context: {
}
}
);
},
},
{
path: '/aboutApp/',
async: function (routeTo, routeFrom, resolve, reject) {
resolve(
{
componentUrl: './pages/aboutApp.html',
},
{
context: {
}
}
);
},
},
{
name: 'contact_tasks',
path: '/contact_tasks/:userId/',
async(routeTo, routeFrom, resolve, reject) {
var userId = routeTo.params.userId;
var userName = '';
var taskList = storage.getItem("taskList"+userId);
var json_taskList = JSON.parse(taskList);
var json_user = JSON.parse(storage.getItem('contacts'));
for(var i=0; i<json_user.UsersEntities.length; i++) {
if(json_user.UsersEntities[i].id == userId){
userName = json_user.UsersEntities[i].name;
break;
}
}
for(var j=0; j<json_taskList.TasksEntities.length; j++)
if(json_taskList.TasksEntities[j].header == ''){
var header='';
var border;
if(json_taskList.TasksEntities[j].text.length <=15)
border = json_taskList.TasksEntities[j].text.length;
else
border = 15;
for(var k=0; k<border; k++)
header += json_taskList.TasksEntities[j].text.charAt(k);
header += '...';
json_taskList.TasksEntities[j]['header'] = header;
console.log(json_taskList.TasksEntities[j].header);
}
//$$(document).find('#initials').html(initials);
resolve(
{
componentUrl: './pages/contact_tasks.html',
},
{
context: {
taskItems: json_taskList,
user: userId,
doerName: userName,
}
}
);
},
},
{
path: '/task/:userId/:index/',
async: function (routeTo, routeFrom, resolve, reject) {
var userId = routeTo.params.userId;
var doerName = $$(document).find('#doerName').text();
var index = routeTo.params.index;
var taskList = storage.getItem("taskList"+userId);
var json_taskList = JSON.parse(taskList);
var task = json_taskList.TasksEntities[index];
resolve(
{
componentUrl: './pages/task.html',
},
{
context: {
task: task,
doerName: doerName,
}
}
);
},
},
{
path: '/newTask/:userId/:doerName/',
async: function (routeTo, routeFrom, resolve, reject) {
var userId = routeTo.params.userId;
var doerName = routeTo.params.doerName;
//var undefParm = {"task":{"id":"","doerId":userId,"header":"","text":"","taskDate":""}};
// strJSON = JSON.parse(undefParm);
resolve(
{
componentUrl: './pages/newTask.html',
},
{
context: {
//taskItem: undefParm,
userId: userId,
doerName: doerName,
}
}
);
},
on: {
pageInit: function (page) {
//$$('#edit-pencil').attr('style','visibility: visible');
$$('#task-header').off('click');
$$('#task-date').off('click');
$$('#task-text').off('click');
},
},
},
{
path: '/newTask/:userId/:doerName/:taskHeader/:taskDate/:taskText/:taskId/',
async: function (routeTo, routeFrom, resolve, reject) {
var userId = routeTo.params.userId;
var taskId = routeTo.params.taskId;
var doerName = routeTo.params.doerName;
var taskHeader = routeTo.params.taskHeader;
var taskDate = routeTo.params.taskDate;
var taskText = routeTo.params.taskText;
resolve(
{
componentUrl: './pages/newTask.html',
},
{
context: {
//taskItem: undefParm,
userId: userId,
doerName: doerName,
taskHeader: taskHeader,
taskDate: taskDate,
taskText: taskText,
taskId: taskId,
}
}
);
},
on: {
pageInit: function (page) {
//$$('#edit-pencil').attr('style','visibility: visible');
$$(document).on('click','#task-header',function(){
$$('#edit-pencil-h').attr('style','visibility: visible');
});
$$(document).on('click','#task-date',function(){
$$('#edit-pencil-d').attr('style','visibility: visible');
});
$$(document).on('click','#task-text',function(){
$$('#edit-pencil-t').attr('style','visibility: visible');
});
},
},
},
/*{
path: '(.*)',
url: './pages/404.html',
},*/
],
//pageInit event
on: {
pageInit: function (page) {
$$(’#tab-1’).find(’#content1’).remove();
returnContactsPage();
loadContactTaskList();
/var networkState = navigator.connection.type;
if (networkState !== Connection.NONE) {
$$(".fab").attr(‘style’, ‘visibility: visible’);
}else{
$$(".fab").attr(‘style’, ‘visibility: hidden; display: none’);
}/
},
},
panel: {
swipe: ‘left’,
},
//long click
touch: {
fastClicks: true,
tapHold: true,
tapHoldDelay: 750,
},
});
To go to another page, for example, I use the link (tag a) with href="/contact_tasks/{{id}}/"
What could be the reason? Thank you!