<html>
<head>
<title>Quiz Application</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" charset="utf-8">
function ready() {
if (document.getElementById("rb1").checked) {
alert("correct");
} else if (document.getElementById("rb2").checked) {
alert("incorrect");
} else {
alert("incorrect");
}
function prevpage() {
document.location=document.history.back();
}
}
</script>
</head>
<body id="body2">
<form method="post">
<center><h1>Quiz Application</h1></center><br><br>
<center>Is JAVA Object Oriented Language ?<br><br>
<radiogroup>
<input type="radio" id="rb1"/>Yes<br>
<input type="radio" id="rb2"/>No<br>
<input type="radio" id="rb3"/>May Be<br>
<input type="submit" id="sub" value="Freeze" onclick="ready();"/><br>
<input type="submit" id="next" value="Previous Question" onclick="prevpage();"/></center>
</radiogroup>
</form>
</body>
</html>
Above is my code for redirecting to first page which is not working .
Please help me for redirecting on first page.
I went through many options like window.location=-window.history.back(); ,window.history.back(1/-1) but none of them working.
Thanks in advance :)
Try this it should work
function prevPage() {
history.go(-1);
navigator.app.backHistory();
}
Related
The code so far:
<!DOCTYPE html>
<html>
<head>
<title>Project 506</title>
<script type="text/javascript" src="sweetalert.min.js"></script>
<script src="https://ajax.googlesapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="sweetalert.css" type="text/css" />
<style type="text/css">
body {
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#first").click(function () {
sweetAlert("Oops...", "Something went wrong!", "error");
});
});
</script>
</head>
<body>
<h1>Message Boxes</h1>
<input type="button" id="first" value="Just a Notification" />
<input type="button" id="second" value="Successfully Completed!" />
<input type="button" id="third" value="Something Went Wrong!" />
</body>
</html>
I'm not clear on why the sweetAlert animation still doesn't pop up when I click on the first button. I've tried moving the lines of <script> into different parts of the script, but it still doesn't work. So how can I solve this problem?
Check you jQuery url.
It should be:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
I have a JS <script> function and then a HTML<form> script and I am trying to implement them into my webpage side by side. However, When I implement them into the page they automatically put themselves one above the other as if there was a <br> in my script.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
<script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script><form action="http://www.qrz.com/lookup" method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form>
</HTML>
All of the information I have found says that I would need to download the .js from the server and modify some of its code and remove the <br>that may be inside it but I am not sure if there is any other way to do it.
<style>
.se-flair {
display: inline-block !important;
}
</style>
Add this to your HTML and it's done.
You can just wrap the script tag in a div with an id or classname and style it like so:
HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
<div id='left'>
<script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script>
</div>
<form action="http://www.qrz.com/lookup" method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form>
</HTML>
CSS
#left {
float: left;
}
If you just want to remove the you could do as mentioned before with the float property, i make the example:
/* Styles go here */ #blockUsr{ float:left; margin: 5px; }
<!DOCTYPE html> <html> <head> <TITLE> test </TITLE> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <BODY> <div id="blockUsr"> <script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"> </script> </div> <form action="http://www.qrz.com/lookup" method="post" style="display:inline"> <b> QRZ callsign lookup: </b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form> </body> </html>
I'm trying to disable a submit button when a file is not selected following a working solution online. Is it something to do with the script type?
This is the example I followed: disable submit button until file selected for upload
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
$(document).ready(
function(){
$('input:submit').attr('disabled',true);
$('input:file').change(
function(){
if ($(this).val()){
$('input:submit').removeAttr('disabled');
}
else {
$('input:submit').attr('disabled',true);
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="file" name="fileInput" id="fileInput" />
<input type="submit" value="submit" disabled />
</form>
</body>
</html>
Try with Jquery declared because the Jquery is not included:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
$(document).ready(
function(){
$('input:submit').attr('disabled',true);
$('input:file').change(
function(){
if ($(this).val()){
$('input:submit').removeAttr('disabled');
}
else {
$('input:submit').attr('disabled',true);
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="file" name="fileInput" id="fileInput" />
<input type="submit" value="submit" disabled />
</form>
</body>
</html>
Include the jQuery library in the <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
I have div and hidden span on it. I want to show it by button clicking. My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script type="text/javascript" src="/static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>
And my js file:
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
When i button clicked span does not show. Why? It shows very fast and than hidden again.
Chrome developer tools console doesn't show errors too.
Thank you.
Try adding return false to your button onClick() event.
Like this:
<button id="register-submit" onclick="show_element('register-username-label'); return false;" class="btn">Register</button>
You need to define your function before your first call to the function is being made. Normally it can be achieved by putting the function code inside a script tag nested inside the head of your HTML.
Like this:
<head>
<script type="text/javascript">
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
Sorry but this code works:
<html>
<head>
<script>
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
<body>
<div>
<span id="register-username-label" class="label label-important" style="visibility: hidden">Username can't be empty</span>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</div>
</body>
</html>
EDIT
I just read your edit. Btw i think your absolute path may causes problem.
Try this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<script type="text/javascript" src="./static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>
I have a JQuery Mobile application and I seem to have several locations in the app where the JavaScript doesn't execute as expected. In short, I have a "Dashboard" page. If the user hasn't logged in, I use the "changePage" function to send them back to the Login page.
If I attempt to login directly via the Login page, everything works as expected. However, if I am redirected to the Login page from the Dashboard page, I see a JavaScript error that says: "loginButton_Click is not defined". To provide more insight, here is my code:
Dashboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dashboardPage" data-role="page">
<div data-role="header">
<a id="logoutButton" href="#" class="ui-btn-left jqm-home">Logout</a>
<h1>My App</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider"><span id="greeting"></span></li>
</ul><br />
</div>
</div>
</body>
</html>
Shared.js
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
login.html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="loginPage" data-role="page">
<div data-role="header"><h1>App Name</h1></div>
<div data-role="content">
<label for="usernameTextBox">Username</label>
<input id="usernameTextBox" type="text" /><br />
<label for="passwordTextBox">Password</label>
<input id="passwordTextBox" type="password" /><br />
<input type="button" value="Login" onclick="return loginButton_Click();" />
</div>
</div>
<script type="text/javascript">
function loginButton_Click() {
$.mobile.changePage("/dashboard.html", { transition: "slide" });
}
</script>
</body>
</html>
I feel like there is something that I don't understand regarding how JavaScript gets into the DOM. What am I doing wrong?
In shared.js add $(...) wrapper:
$(function(){
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
});