I am creating an Angular App.The file structure is as follows:
index.html
login.html
js/index.js
index.html content is
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script href="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" ></script>
</head>
<body ng-app="single-page-app">
<div ng-view> </div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
js/index.js content is
var app1=angular.module('single-page-app',['ngRoute']);
app1.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: '../login.html'
}).otherwise()
});
and login.html content is
<form class="form-horizontal" style="position:absolute;top:30%;left:20%">
<div class="form-group col-xs-offset-2">
<label for="userName" class="col-xs-3 control-label">UserName</label>
<div class="col-xs-7">
<input type="text" class="form-control col-xs-offset-1" id="userName" placeholder="UserName">
</div>
</div>
<div class="form-group col-xs-offset-2">
<label for="password" class="col-xs-3 control-label">Password</label>
<div class="col-xs-7">
<input type="password" class="form-control col-xs-offset-1" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class=" col-xs-12">
<button type="submit" class="btn btn-default col-xs-offset-4">Sign in</button>
</div>
</div>
</form>
When I open index.html on server using python -m SimpleHTTPServer, there is no content of login.html file in index.html. Can anyone tell me why ng-route is not working in the above case??
First: templateUrl should be relative to the app root. I don't think ../login.html is valid.
If the templates are located within the website root directory, try this
var app1=angular.module('single-page-app',['ngRoute']);
app1.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: '/login.html' // the edited line
}).otherwise()
});
Second: As of angular 1.3, a <base> tag should be added to the <head> section.
<base href="/">
First thing is you have to have some kind of value inside of .otherwise() or just remove it. Then it will work
Related
I am creating an app and I keep coming across this problem. The 'Sign-up page' has a "sign in" link to it that is intended to redirect the user to a 'login page/form'. However, when I run the code standalone that is the "index.html" file when I click the 'sign-in' link it says the file is not found. Though, if I use "VS Code's Live Server" that is 'http://127.0.0.1:5500/index.html' it works perfectly fine. Here's the code for the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<title>Connect Us</title>
</head>
<body>
<div class="wrapper">
<section class="form signup">
<header>Connect Us</header>
<form action="#">
<div class="error-txt">This is an error message!</div>
<div class="name-details">
<div class="field input">
<label>First Name</label>
<input type="text" placeholder="First Name">
</div>
<div class="field input">
<label>Last Name</label>
<input type="text" placeholder="Last Name">
</div>
</div>
<div class="field input">
<label>Email Address</label>
<input type="text" placeholder="Enter your email">
</div>
<div class="field input">
<label>Password</label>
<input type="text" placeholder="Enter a password">
<i class="fas fa-eye"></i>
</div>
<div class="field input">
<label>Confirm Password</label>
<input type="text" placeholder="Re-enter the password">
<i class="fas fa-eye"></i>
</div>
<div class="field image">
<label>Profile Picture</label>
<input type="file">
</div>
<div class="field button">
<input type="submit" value="Take me to chat">
</div>
</form>
<div class="link">Already connected? Sign In</div>
</section>
</div>
</body>
</html>
And here is the code for the login.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<title>Connect Us</title>
</head>
<body>
<div class="wrapper">
<section class="form login">
<header>Connect Us</header>
<form action="#">
<div class="error-txt">This is an error message!</div>
<div class="field input">
<label>Email Address</label>
<input type="text" placeholder="Enter your email">
</div>
<div class="field input">
<label>Password</label>
<input type="text" placeholder="Enter your password">
<i class="fas fa-eye"></i>
</div>
<div class="field button">
<input type="submit" value="Take me to chat">
</div>
</form>
<div class="link">New Member? Sign Up</div>
</section>
</div>
</body>
</html>
Clarification to what my problem is:
file:///C:/login.html
Your file couldn’t be accessed
It may have been moved, edited, or deleted.
ERR_FILE_NOT_FOUND
Though when I run the same code with 'VS Code' it works perfectly.
NOTE
When I click the 'Sign in' link this http shows instead:
http://127.0.0.1:5500/login.html
You have href = /login.html
When you open the file directly, the href starting with a forward slash tells the browser to find login.html in the filesystem root directory. See here http://www.linfo.org/forward_slash.html. login.html probably is in a folder several layers deep, so the browser cannot find it.
If you request the resource through a HTTP server, a forward slash tells the server to find login.html in the document root, where you are likely to store all your website’s files.
I hope my explanation is not too confusing. Please point out any problems.
I'm using eonasdan datetimepicker. I chose default date via using options. I opened the page using chrome, firefox 47.0, and microsoft edje 25.1.
Firefox Case: The date appears in the textfield. But, if I go to
the address bar and hit 'enter', the date shown in the textfield
disappears.
Chrome and edje Case: When the page opens, the date is not shown
in the textfield.
I created a fiddle for this question fiddle, what happens in the fiddle is the same as what happens in the google chrome and internet explorer case.
I tried using the 'viewDate: true' option for datetimepicker which fixed the problem. But it created another problem -- the calendar is not shown when I click the calendar icon.
I have no idea why this is happening. Any help is greatly appreciated.
The same code in the fiddle is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>
Example
</title>
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="container">
<form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
My Panel
</div>
<div class="panel-body">
<div class="form-group text-right">
<label class="text-right">My Date</label>
<div class="form-group">
<div class='input-group date' id='d0'>
<input type="text" name="j_idt11:j_idt15:0:j_idt21" value="2016-09-03" class="form-control text-right" onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
var cID = "#";
cID = cID.concat('d0');
var t = '2016-09-03'
var options = {
format: 'L',
defaultDate: moment(t)
};
$(cID).datetimepicker(options);
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
You don't need value attribute for datetimepicker input in your HTML. If you remove it, your code will work as showed in the following example:
var cID = "#";
cID = cID.concat('d0');
var t = '2016-09-03';
var options = {
format: 'L',
defaultDate: moment(t)
};
$(cID).datetimepicker(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
My Panel
</div>
<div class="panel-body">
<div class="form-group text-right">
<label class="text-right">My Date</label>
<div class="form-group">
<div class='input-group date' id='d0'>
<input type="text" name="j_idt11:j_idt15:0:j_idt21" class="form-control text-right" onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
If you want to use data attributes you can use data-date-* to set an option or data-date-options setting an option object. In your case you can use data-date-default-date instead of value.
You can find more about data-* initialization here and here.
CDN :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"></script>
HTML :
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<h6>datetimepicker2</h6>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
JavaScript :
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
Use This Code..
This will useful for you..
I am using angurla js, bootstrap for web development.
I want to show date picker on text box.
I found solution here https://angular-ui.github.io/ui-date/
But it looks like need to include jquery, jquery ui, that is unnecessary overhead on application only for date picker.
Is there inbuilt feature available in angular for date picker?
Below is my plunker https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview
In Date of birth field I want to add date picker.
<!DOCTYPE html>
<html lang="en" ng-app="autoQuote">
<head>
<!-- start: Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end: Meta -->
<link rel="shortcut icon" href="<?php echo base_url(); ?>assets/themes/default/img/favicon.ico">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-resource.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="autoQuoteCtrl.js"></script>
<script src="dtoResource.js"></script>
<script src="questionResource.js"></script>
<script src="controlDirectives.js"></script>
<script src="postDtoFactory.js"></script>
<script src="custom-required.validator.js"></script>
</head>
<body>
<div class="col-md-2"></div>
<div class="container-fluid col-md-8">
<div class="row" ng-if='questions'>
<div class="col-md-12 text-center">
<div class="page-header">
<h1>
User Form</small>
</h1>
</div>
<div ng-controller="autoQuoteCtrl">
<form class="form-horizontal text-center" role="form" name="DTOstep1" ng-submit="onSubmit()" novalidate>
<div class="row">
<div class="form-group">
<label class="col-sm-5 control-label" for="dob">Date of Birth</label>
<div class="col-sm-6">
<input type="text" id="dob" class="form-control" name="dob" ng-model="answers.dob" required>
</div>
</div>
<span class="form-error" ng-show="submitted && DTOstep1.dob.$error.required">This field is required.</span>
</div>
<div class="col-sm-5"></div>
<div class="col-sm-6">
<input name="saveDto" type="submit" class="btn btn-success btn-lg" value="Continue" />
<input type="button" class="btn btn-info" name="formclone" value="+ Add More Cars" ng-click="appendClonedDiv()" />
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
</body>
</html>
You can use input type as date <input type="date" id="dob" class="form-control" name="dob" ng-model="answers.dob" required>
plnkr.co/edit/lIzYjMVmmP26cr3rZrxF?p=preview
angular.js does not sport a datepicker natively (it is not it's scope).
But angular-ui.js (here) provides a datepicker module, quite powerful...
See for example this plunkr.
Searched around and found ngMaterial provides features like that.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
var app = angular.module("autoQuote", ["ui.router", "ngResource","ngAnimate","ngMaterial"]);
<md-datepicker ng-model="answers.myDate" md-placeholder="Enter date"></md-datepicker>
I'm trying to send my form data of php file to js file but I can't sure that php file is called by js file.
<!DOCTYPE html>
<html class="hide-sidebar ls-bottom-footer" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Learning</title>
<link href="css/vendor.min.css" rel="stylesheet">
<script type ="text/javascript" src="api/serve.js"></script>
<link href="css/theme-core.min.css" rel="stylesheet">
<link href="css/module-essentials.min.css" rel="stylesheet" />
<link href="css/module-material.min.css" rel="stylesheet" />
<link href="css/module-layout.min.css" rel="stylesheet" />
<link href="css/module-sidebar.min.css" rel="stylesheet" />
<link href="css/module-sidebar-skins.min.css" rel="stylesheet" />
<link href="css/module-navbar.min.css" rel="stylesheet" />
<link href="css/module-messages.min.css" rel="stylesheet" />
<link href="css/module-carousel-slick.min.css" rel="stylesheet" />
<link href="css/module-charts.min.css" rel="stylesheet" />
<link href="css/module-maps.min.css" rel="stylesheet" />
<link href="css/module-colors-alerts.min.css" rel="stylesheet" />
<link href="css/module-colors-background.min.css" rel="stylesheet" />
<link href="css/module-colors-buttons.min.css" rel="stylesheet" />
<link href="css/module-colors-text.min.css" rel="stylesheet" />
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body class="login">
<div id="content">
<div class="container-fluid">
<div class="lock-container">
<div class="panel panel-default text-center paper-shadow" data-z="0.5">
<h1 class="text-display-1">Create account</h1>
<div class="panel-body">
<!-- Signup -->
<form id="signup" action="" method="POST">
<div class="form-group">
<div class="form-control-material">
<input id="firstName" type="text" class="form-control" name="firstname" value="">
<label for="firstName">First name</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="lastName" type="text" class="form-control" name="lastName" value="">
<label for="lastName">Last name</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="email" type="email" class="form-control" name="email" value="">
<label for="email">Email address</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="password" type="password" class="form-control" name="password" value="">
<label for="password">Password</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="passwordConfirmation" type="password" class="form-control" placeholder="Password Confirmation">
<label for="passwordConfirmation">Re-type password</label>
</div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<input type="checkbox" id="agree" />
<label for="agree">* I Agree with Terms & Conditions!</label>
</div>
</div>
<div class="text-center">
<button id="submit" class="btn btn-primary" type="submit" >Create an Account</button>
</div>
</form>
<!-- //Signup -->
</div>
</div>
</div>
</div>
</div>
<script>
var colors = {
"danger-color": "#e74c3c",
"success-color": "#81b53e",
"warning-color": "#f0ad4e",
"inverse-color": "#2c3e50",
"info-color": "#2d7cb5",
"default-color": "#6e7882",
"default-light-color": "#cfd9db",
"purple-color": "#9D8AC7",
"mustard-color": "#d4d171",
"lightred-color": "#e15258",
"body-bg": "#f6f6f6"
};
var config = {
theme: "html",
skins: {
"default": {
"primary-color": "#42a5f5"
}
}
};
</script>
<!-- Separate Vendor Script Bundles -->
<script src="js/vendor-core.min.js"></script>
<script src="js/vendor-countdown.min.js"></script>
<script src="js/vendor-tables.min.js"></script>
<script src="js/vendor-forms.min.js"></script>
<script src="js/vendor-carousel-slick.min.js"></script>
<script src="js/vendor-player.min.js"></script>
<script src="js/vendor-charts-flot.min.js"></script>
<script src="js/vendor-nestable.min.js"></script>
<script src="js/module-essentials.min.js"></script>
<script src="js/module-material.min.js"></script>
<script src="js/module-layout.min.js"></script>
<script src="js/module-sidebar.min.js"></script>
<script src="js/module-carousel-slick.min.js"></script>
<script src="js/module-player.min.js"></script>
<script src="js/module-messages.min.js"></script>
<script src="js/module-maps-google.min.js"></script>
<script src="js/module-charts-flot.min.js"></script>
<script src="js/theme-core.min.js"></script>
</body>
</html>\
And my js file is as follws.
serve.js
$(document).ready(function(){
$("form").click( function(e){
e.preventDefault();
// get values from textboxs
var name = $('#firstName').val();
var lname = $('#lastName').val();
var mail = $('#email').val();
var password = $('#password').val();
var confpass = $('#passwordConfirmation');
$.ajax({
url: "api/learnapi.php",
type: "post",
dataType: "json",
data: {type: "signup", Name: name, Lname: lname, Pass: password, Email: mail,Pass1:confpass },
//type: should be same in server code, otherwise code will not run
ContentType: "application/json",
success: function (response) {
alert(JSON.stringify(response));
},
error: function (err) {
alert(JSON.stringify(err));
}
});
});
});
I'm not sure that these my two files are linked together.
How do is link them
In your server.js file replace $('form') with $('form #submit')
Right now you are calling click event on the form instead of button.
Check view source to see if your file is actually included in dom.
I have tried to get this work for hours.
Both test pageinit and pageshow on row 1 in login.js with no response at all, but the page is still being loaded and I not getting any javascript error when I run it in FF.
From index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PSForum Notiser</title>
<link rel="stylesheet" href="js/jquery.mobile/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="phonegap.js"></script>
<script src="js/jquery.mobile/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile/jquery.mobile-1.3.2.min.js"></script>
<script src="js/main.js"></script>
<script src="js/login.js"></script>
</head>
From login.html
<div id="loginPage" data-role="page">
<div data-role="content">
<form id="loginForm">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<input type="submit" value="Login" id="submitButton">
</form>
</div>
</div>
From login.js (the part wish not running)
$("#loginPage").on('pageinit', function(){
alert("Hello world!");
console.log("loginPage is loaded");
checkPreAuth();
var form = $("#loginForm");
$(form).on("submit",handleLogin);
if(window.localStorage["username"] != undefined) {
$("#username", form).val(window.localStorage["username"]);
}
});
I hope the wisdom of stackoverflow can help me find why $("#loginPage").on('pageinit') not firing?
Best regards