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
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 want to create a form in HTML that can take the inserted Name by the user and then after pressing submit shows the corresponded value (Age) to that user. This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<form action="">
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="submit" class="button" onclick="myFunction();" value="Submit"<br/>
</div>
</div>
</form>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
The problem is that after pressing submit the Name will be shown in the myshow span section(Age:) just
for a fraction of second and then it disappeares and url changes to localhost:5000/?Name=Jack rather than localhost:5000/the current path/?Name=Jack
You should use onSubmit on the form element to call the function and then return false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
return false;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<form action="" onSubmit="return myFunction();">
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="submit" class="button" value="Submit"><br/>
</div>
</div>
</form>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
Ps: you did not close the submit tag properly
I think that you don't need submit.
If you don't need to submit, You have to change this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="button" class="button" onclick="myFunction();" value="Submit"<br/>
</div>
</div>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
Trying to make an animation when clicking on a button, using semantic ui, a framework.
Tried the first code listed in this link => https://semantic-ui.com/modules/transition.html
But it doesn't work
Thanks in advance !
<!DOCTYPE html>
<html>
<head>
<title>Formulaire</title>
<link rel="stylesheet" type="text/css" href="css/form.css">
<link rel="stylesheet" type="text/css" href="css/transition.css">
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username"></input>
<input class="textForm" name="password" type="password" placeholder="Password"></input>
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="submit" value="Confirm"></input>
<input class="button" type="button" value="Cancel"></input>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/form.js"></script>
</body>
(function(){
var bouttonConfirmer = document.querySelector(".button");
bouttonConfirmer.addEventListener("click",function(event){
var objet = document.querySelector(".textForm");
objet.transition('scale');
alert("oki");
});
})();
The first problem is that semantic-ui requires jquery (see docs) so I included jquery js and semantic-ui css/js.
The second problem is that button[type=submit] will submit the form and cause a page load. So you won't be able to see the transition. I changed the type=button to prevent this.
Lastly I made your <input /> elements self closing.
$("#confirm").on("click", function() {
$('.textForm').transition('scale');
});
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username" />
<input class="textForm" name="password" type="password" placeholder="Password" />
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="button" value="Confirm" id="confirm" />
<input class="button" type="button" value="Cancel" />
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</body>
</html>
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've bought and installed a custom template for Wordpress and it is randomly giving white/blank pages on all areas of the site excluding the admin cp when navigating around on IE7 (works fine on Chrome). I know it's the template as it works fine with standard templates, and I'm pretty sure it's a javascript as I've disabled all the plugins to see if it was those.
Here's the site: http://www.visualisebi.com
Looking at a page with minimal code that has the issue (Admin CP login area), the only major differences I can see that are different between the new template pages and a standard template are the amount of scripts the new template calls. Here's an example:
New template source:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Visualise Business Intelligence Services › Log In</title>
<link rel='stylesheet' id='wp-admin-css' href='http://www.visualisebi.com/wp-admin/css/wp-admin.css?ver=20111208' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css' href='http://www.visualisebi.com/wp-admin/css/colors-fresh.css?ver=20111206' type='text/css' media='all' />
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery-1.6.1.min.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/modernizr-2.0.js?ver=2.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/superfish.js?ver=1.4.8'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.prettyPhoto.js?ver=3.1.2'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/easyTooltip.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.easing.1.3.js?ver=1.3'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.loader.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-includes/js/swfobject.js?ver=2.2'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.cycle.all.js?ver=2.99'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/audiojs/audio.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/custom.js?ver=1.0'></script>
<meta name='robots' content='noindex,nofollow' />
</head>
<body class="login">
<div id="login"><h1>Visualise Business Intelligence Services</h1>
<p class="message"> You are now logged out.<br />
</p>
<form name="loginform" id="loginform" action="http://www.visualisebi.com/wp-login.php" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
<input type="hidden" name="redirect_to" value="http://www.visualisebi.com/wp-admin/" />
<input type="hidden" name="testcookie" value="1" />
</p>
</form>
<p id="nav">
Lost your password?
</p>
<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}
if(typeof wpOnload=='function')wpOnload();
</script>
<p id="backtoblog">← Back to Visualise Business Intelligence Services</p>
</div>
<link rel='stylesheet' id='wp-pagenavi-css' href='http://www.visualisebi.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
var wpBannerizeJavascriptLocalization = {"ajaxURL":"http:\/\/www.visualisebi.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/plugins/wp-bannerize/js/wpBannerizeFrontend.min.js?ver=3.0.32'></script>
<div class="clear"></div>
</body>
</html>
Standard template source:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Visualise Business Intelligence Services › Log In</title>
<link rel='stylesheet' id='wp-admin-css' href='http://www.visualisebi.com/wp-admin/css/wp-admin.css?ver=20111208' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css' href='http://www.visualisebi.com/wp-admin/css/colors-fresh.css?ver=20111206' type='text/css' media='all' />
<script type='text/javascript' src='http://www.visualisebi.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<meta name='robots' content='noindex,nofollow' />
</head>
<body class="login">
<div id="login"><h1>Visualise Business Intelligence Services</h1>
<p class="message"> You are now logged out.<br />
</p>
<form name="loginform" id="loginform" action="http://www.visualisebi.com/wp-login.php" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
<input type="hidden" name="redirect_to" value="http://www.visualisebi.com/wp-admin/" />
<input type="hidden" name="testcookie" value="1" />
</p>
</form>
<p id="nav">
Lost your password?
</p>
<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}
if(typeof wpOnload=='function')wpOnload();
</script>
<p id="backtoblog">← Back to Visualise Business Intelligence Services</p>
</div>
<link rel='stylesheet' id='wp-pagenavi-css' href='http://www.visualisebi.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
var wpBannerizeJavascriptLocalization = {"ajaxURL":"http:\/\/www.visualisebi.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/plugins/wp-bannerize/js/wpBannerizeFrontend.min.js?ver=3.0.32'></script>
<div class="clear"></div>
</body>
</html>
Any help greatly appreciated.
Is the original theme properly working in IE7 ??
Have you checked the theme demo where you purchased the theme ? Is it working in IE7. If not you can ask the theme owner to fix the issue.
(Cannot comment yet and hence the answer.)