When I comment cordova.js and index.js in “index.html”, my script running properly but when I enable it getting white screen on my android phone. white screen disappear when I comment on “index.js” but JavaScript not working.
index.html: `
XCURE<!-- Right panel with reveal effect-->
<div class="panel panel-right panel-reveal theme-dark">
<div class = "content-block">
<!-- <p>Contents goes here...</p> -->
<ul>
<li><a href="/about/">Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<!-- Your main view, should have "view-main" class -->
<div class="view view-main safe-areas">
<!-- Page, data-name contains page name which can be used in callbacks -->
<!-- Top Navbar -->
<div class="navbar" >
<div class="navbar-inner ">
<div class="left ">
<a href="/" class="logo"><img class="s-logo" src="img/s-logo.png" alt="xecure-pro" /></a>
</div>
<div class="title center" ><h5 class="pagetitle">Main</h5></div>
<div class="right">
<a href="#" class="link icon-only panel-open" data-panel="right">
<i class="icon f7-icons ios-only">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
</div>
</div>
<div class="page" data-name="home">
<div class="page-content">
<div class="block">
<div class="row">
<div class="contents">
<h5>QUICK SEARCH THROUGH PRO</h5>
<div class="btn">
<a href="#" class="button col">SEARCH PRO</a>
</div>
<div class="btn">
<a href="#"><button class="button col gray-btn">view emergencies</button></a>
</div>
<div class="btn">
<a href="#"><button class="button col button-btn">personal post</button></a>
</div>
</div>
ALREADY AN ACCOUNT @ XECURE PRO ?
LOGIN @ PRO
NEW AT XECURE PRO ? REGISTER NOW.
REGISTER @ PRO
My App.js:
var $$ = Dom7;
var app = new Framework7({
root: '#app', // App root element
id: 'io.framework7.testapp',
name: 'Framework7', // App name
cache: false,
theme: 'auto', // Automatic theme detection
// App root data
view: {
stackPages: true,
pushState: false,
animateWithJS: true,
},
touch: {
materialRipple: true,
},
statusbar: {
overlay: "auto",
scrollTopOnClick: true,
iosOverlaysWebView: true,
iosTextColor: "black",
iosBackgroundColor: null,
materialBackgroundColor: null
},
// App routes
routes: routes,
});
// Init/Create main view
var mainView = app.views.create('.view-main', {
url: '/'
});
var page = $$('.page[data-name="home"]')[0].f7Page;
if (page.name == "home") {
dynamicallyLoadScript("js/homeScript.js");
}
$$(document).on('page:init', function (e, page) {
var page = e.detail;
console.log(page);
});
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); //Make a script DOM node
script.src = url; //Set it's src to the provided URL
document.body.appendChild(script);
}
My routes.js:
var timestamp = Date.now();
routes = [
{
path: '/',
url: './index.html?'+timestamp,
},
{
path: '/about/',
url: './pages/about.html',
},
{
path: '/form/',
url: './pages/form.html',
},
// Page Loaders & Router
{
path: '/page-loader-template7/:user/:userId/:posts/:postId/',
templateUrl: './pages/page-loader-template7.html',
},
{
path: '/page-loader-component/:user/:userId/:posts/:postId/',
componentUrl: './pages/page-loader-component.html',
},
{
path: '/request-and-load/user/:userId/',
async: function (routeTo, routeFrom, resolve, reject) {
// Router instance
var router = this;
// App instance
var app = router.app;
// Show Preloader
app.preloader.show();
// User ID from request
var userId = routeTo.params.userId;
// Simulate Ajax Request
setTimeout(function () {
// We got user data from request
var user = {
firstName: 'Vladimir',
lastName: 'Kharlampidi',
about: 'Hello, i am creator of Framework7! Hope you like it!',
links: [
{
title: 'Framework7 Website',
url: 'http://framework7.io',
},
{
title: 'Framework7 Forum',
url: 'http://forum.framework7.io',
},
]
};
// Hide Preloader
app.preloader.hide();
// Resolve route to load page
resolve(
{
componentUrl: './pages/request-and-load.html',
},
{
context: {
user: user,
}
}
);
}, 1000);
},
},
// Default route (404 page). MUST BE THE LAST
{
path: '(.*)',
url: './pages/404.html',
},
];
My Custom Script:
var storedData = {'user_name': 'developer',
'first_name': 'Kuntal',
'last_name': 'Parbat',
'phone': '9876543210',
'email': '[email protected]',
'apikey': ''};
window.localStorage.setItem("userdata", JSON.stringify(storedData));
var retrievedData = window.localStorage.getItem("userdata");
var value = JSON.parse(retrievedData);
if(value.apikey == "") {
app.popup.open("#landing-screen", true);
//console.log(value.apikey);
window.localStorage.clear();
}
// Open dynamic popup
$$('#LoginMe').on('click', function () {
loginPopup.open();
});
var loginPopup = app.popup.create({
content: '<div class="login-screen" id="login-screen">'+
'<div class="view">'+
'<div class="page">'+
'<div class="page-content login-screen-content">'+
'<div class = "navbar">'+
'<div class = "navbar-inner">'+
'<div class="left logo"><img class="s-logo" src="img/s-logo.png" alt="xecure-pro" /></div>'+
'<div class = "center sliding"><h5>LOGIN</h5></div>'+
'<div class="right">'+
'<a class="link popup-close closelogin icon-only"><i class="icon f7-icons ios-only">close</i><i class="icon material-icons md-only">close</i></a>'+
'</div></div></div>'+
'<div class="block">'+
'<div class="row">'+
'<div class="contents"><div class="content">'+
'<h5>INPUT EMAIL ADDRESS:</h5>'+
' <div class="item-input-wrap">'+
'<input type="text" name="mail" >'+
'</div>'+
'<h5>INPUT PASSWORD:</h5>'+
'<div class="item-input-wrap">'+
'<input type="password" name="pwd" >'+
'</div>'+
'<button class="button col">CONTINUE</button>'+
'</div></div></div></div></div></div></div>',
// Events
on: {
open: function (popup) {
console.log('Popup open');
},
opened: function (popup) {
console.log('Popup opened');
},close: function (popup) {
console.log('Popup Close');
},closed: function (popup) {
console.log('Popup Closed');
},
}
});
$$(document ).on( "click", ".closelogin", function() {
loginPopup.close();
});
$$('#RegisterMe').on('click', function () {
registerPopup.open();
});
// Create dynamic Popup
var registerPopup = app.popup.create({
content: '<div class="login-screen">'+
'<div class="view">'+
'<div class="page">'+
'<div class="page-content login-screen-content">'+
'<div class = "navbar">'+
'<div class = "navbar-inner">'+
'<div class="left logo"><img class="s-logo" src="img/s-logo.png" alt="xecure-pro" /></div>'+
'<div class = "center sliding"><h5>REGISTER</h5></div>'+
'<div class="right">'+
'<a class="link popup-close closeregister icon-only"><i class="icon f7-icons ios-only">close</i><i class="icon material-icons md-only">close</i></a>'+
'</div></div></div>'+
'<div class="block">'+
'<div class="row">'+
'<div class="contents"><div class="content">'+
'<h5>YOUR ORGANISATION ID:</h5>'+
' <div class="item-input-wrap">'+
'<input type="text" name="mail" >'+
'</div>'+
'<h5>SCAN QR CODE:</h5>'+
'<div class="item-input-wrap">'+
'<button class="button button-round" id="QrStart">Click Scan QR Code</button>'+
'</div>'+
'<button class="button col">CONTINUE</button>'+
'</div></div></div></div></div></div></div>',
// Events
on: {
open: function (popup) {
console.log('Popup open');
},
opened: function (popup) {
console.log('Popup opened');
},close: function (popup) {
console.log('Popup Close');
},closed: function (popup) {
console.log('Popup Closed');
},
}
});
$$(document ).on( "click", ".closeregister", function() {
registerPopup.close();
});
//var QRScanner = require('QRScanner');
$$(document).on('click', "#QrStart", function () {
//app.dialog.alert("Ckick working", "QC Scanner");
scan_qr();
});
function onDone(err, status){
if (err) {
// here we can handle errors and clean up any loose ends.
//console.error(err);
app.dialog.alert(err, "QC Scanner");
}
if (status.authorized) {
// W00t, you have camera access and the scanner is initialized.
// QRscanner.show() should feel very fast.
} else if (status.denied) {
QRScanner.openSettings();
// The video preview will remain black, and scanning is disabled. We can
// try to ask the user to change their mind, but we'll have to send them
// to their device settings with `QRScanner.openSettings()`.
} else {
app.dialog.alert("We didnt get permission to Scan", "QC Scanner");
// we didn't get permission, but we didn't get permanently denied. (On
// Android, a denial isn't permanent unless the user checks the "Don't
// ask again" box.) We can ask again at the next relevant opportunity.
}
}
var callback = function(err, contents){
if(err){
app.dialog.alert(err._message, "QC Scanner");
} else{
app.dialog.alert('The QR Code contains: ' + contents, "QC Scanner");
}
}
function scan_qr(){
QRScanner.prepare(onDone); // show the prompt
QRScanner.scan(callback);
QRscanner.show();
app.dialog.alert('Complete', "QC Scanner");
}