Everything seems to be referenced correctly however I can't get it to work properly. Strangely it worked once but took 10 seconds before the validation message popped up, didn't change anything and tried again but stop working. The only warning i have is event.returnValue is deprecated. Please use the standard event.preventDefault() instead. in the jQuery library.
<html>
<head>
<link rel="stylesheet" href="jQuery-Validation-Engine-master/css/validationEngine.jquery.css" type="text/css"/>
</head>
<body>
<form id="formID">
<input class="validate[required]" type="text" id="agree" name="agree"/>
</form>
<script src='js/jquery-1.10.2.min.js'></script>
<script src="jQuery-Validation-Engine-master/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="jQuery-Validation-Engine-master/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#formID").validationEngine();
});
</script>
</body>
If there is nothing wrong with the above then it may be something else in my project interfering, but any help would be appreciated.
What is happening, probably, is at the time jQuery is loaded your plugin(s) aren't yet loaded so when you call the validationEngine() method, it's not yet defined. I recommend loading your scripts synchronously with Modernizr and call that method once both scripts have loaded.
If you stick with the Modernizr way all you need to do is include your minimized version of Modernizr in the head and call your scripts like below.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Your Document</title>
<!--
following script loads first. nevermind the version, I copied it from a script of mine
-->
<script type="text/javascript" src="js/modernizr.2.6.2.min.js"></script>
</head>
<body>
<form id="formID">
<!-- etc -->
</form>
<script type="text/javascript">
Modernizr.load([
{
// following loads next
load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
complete: function() {
if (!window.jQuery) Modernizr.load('js/jquery-1.10.2.min.js');
// this is your local copy of jQuery, in case you might need a fallback
}
},{
// finally the remaining scripts load
load:[
'jQuery-Validation-Engine-master/js/languages/jquery.validationEngine-en.js',
'jQuery-Validation-Engine-master/js/jquery.validationEngine.js'
],
complete: function() {
// all is loaded. do what you want here.
$("#formID").validationEngine();
}
}]);
</script>
</body>
</html>
In my case as I mentioned above updating to jQuery lib 1.11.0 rid the warning for me. (latest chrome)
Here is how I ended up using the validationEngine if interested:
<form id="formID" />
<button type="submit" value="Save" id="Save" onclick="clicked(event);">Submit Survey</button>
function clicked (e)
{
if (confirm('Are you sure you want to submit?'))
{
if ($("#formID").validationEngine('validate'))
{
my.LocalStorage.save();
}
}
e.preventDefault();
}
Related
I have downloaded the 1.11.3.min.js file and placed it in the same file where I have kept the HTML and script files. Before writing this code I have practiced jQuery a lot and those time I have succeeded, but this time I can't run it.
HTML
<!DOCTYPE html>
<head>
<!---<script type="text/javascript" src="image.js"></script---->
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.js"></script>
<!---<link rel="stylesheet" type="text/css" href="image.css">---->
</head>
<body onload="slideimage()">
<img src="1.jpg" id="slide" width="400px" height="400px"/>
<div id="button">
`enter code here`<button onclick="change_image()" />1</button>
</div>
</body>
</html>
jQuery
$document.ready(function(){
$("#slide").click(function(){
$(this).slideUp(400);
});
});
I have downloaded the 1.11.3.min.js file and put in the same file where i have kept the HTML and script files.Before writing this code i have practiced jQuery a lot and those time i have succeeded.But this time i have failed to run it.
Just replace this line of code
$document.ready(function(){
with this line
$(document).ready(function(){
You did't add brackets around document
May be you want do this:
$(document).ready(function(){
$("#slide").click(function(){
$(this).slideUp(400);
});
});
First, I recommend using CDN's for jQuery (less loading time), it can be found here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
then, you forgot to end your function, and you forgot () around document
your script should look like this:
$(document).ready(function() {
$("#slide").click(function() {
$(this).slideUp(400);
});
});
<html>
<head>
<title>Quiz Application</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
function ready()
{
if(document.getElementById("rb2").checked)
{
alert("correct");
}else if(document.getElementById("rb1").checked)
{
alert("incorrect");
}
else
{
alert("incorrect");
}
}
function nextPage()
{
window.location = "next.html";
}
</script>
</head>
<body>
<form method="post">
<center><h1>Quiz Application</h1></center><br><br>
<center>What does JVM stands for ?<br><br>
<radiogroup>
<input type="radio" id="rb1"/>Java Vendor Machine<br>
<input type="radio" id="rb2"/>Java Virtual Machine<br>
<input type="radio" id="rb3"/>Java Viral Machine<br>
<input type="submit" id="sub" value="Freeze" onclick="ready();"/><br>
<input type="submit" id="next" value="Next Question" onclick="nextPage();"/></center>
</radiogroup>
</form>
</body>
</html>
Above is my code for redirecting my page to next page after click event.
But it is not redirecting to next page.I went through many questions on stackoverflow as well but didnt succeed.
Please help me .
Thanks in advance.
What are you doing there? If you're doing it with jQuery mobile an example would look like this:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"> </script>
</head>
<body>
<div data-role="page" id="page1">
<p>This is page 1. If you want to go to Page 2 click here.
</div>
<div data-role="page" id="page2">
<p>This is page 2. If you want to go back to Page 1 click here.
</div>
</body>
</html>
Changing a page by function could look like this:
function changePage() {
$.mobile.changePage( "#loginPAGE", { transition: "none", changeHash: true });
}
Here's a pen: http://codepen.io/anon/pen/gaeoQE
Frameworks - Mobile App Development
So like i said in my comment, i would recommend you to use a framework. Since i don't know, how conversant you're in JavaScript and anything else i think you should start with jQuery. For mobile App development it's not one of the best frameworks in my opinion but it's easy to learn and thats important for you to start.
So jQuery is a thing for your website. For your mobile application you need jQuery mobile.
You go to that websites and download both. When your download is finished, you're going to open up your index.html and add the scripts to your <head></head> section so that it looks like the following:
<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>
These things are important. Also the order in which you include the scripts is important.
After adding this to your header, you're able to access a whole bunch of functions. All of the features are testable inside a demo environment which can be found over here: jQuery mobile Demos (1.4.5).
When you have finished that, you're going to copy my code from my pen into your <body></body> and it should work. For changing a page via javascript you can use the function changePage() which i've already posted before.
I hope this will help you, if not please let me know where exactly i can help you.
I found out the solution for my query . i just wrote the following function onClick of a button (input type should be button and not submit then only it will work)
function nextPage()
{
document.location="nextpage.html"; //instead of window.location
}
I'm trying to do my first tests usign JQuery and it seems to be more difficult than what I expected.
I have a simple form calling some long operations. What I want is to display a progress bar during the loading. What I try to do in the following code is to replace the submit button with a progress bar when the user submits the form. The next page taking time to load, he will see a nice animation making him wait.
<html>
<head>
<title>Test form</title>
</head>
<body>
<form id="myCuteLittleForm"><input type="submit" id="submit"/></form>
<br />
<script src="http://code.jquery.com/jquery-1.9.1.js">
$(document).ready(function() {
$('#myCuteLittleForm').submit(function() {
$("#submit").replaceWith('<progress value="" max="">Import en cours.</progress>');
});
});
</script>
</body>
</html>
However, to my great distress, it doesn't work. Am I just doing bad jquery or is there a fundamental incomprehension ?
Do it in other script tag:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myCuteLittleForm').submit(function() {
$("#submit").replaceWith('<progress value="" max="">Import en cours.</progress>');
});
};
</script>
As a newbie I am trying to run a PHP file and then an HTML file automatically using an
onload="Trigger();" in the body of the HTML.
Enclosed is my code but it will not work even though the onload is accessing the Javascript code.
<html>
<head>
<meta http-equiv="Content-Language" content="en-ca">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<script src="jquery.js" language="javascript1.2" type="text/javascript"></script>
<script src="swapstyle.js" language="javascript1.2" type="text/javascript"></script>
<script src="cookie.js" language="javascript1.2" type="text/javascript"></script>
<script language="Javascript">
function Trigger() {
document.Trigger.action = "http://www.Website.com/ISP.php";
document.Trigger.target = "_top";
document.Trigger.submit();
document.Trigger.action = "http://www.Website.com/Home.html";
document.Trigger.target = "_top";
document.Trigger.submit();
return true;
}
</script>
</head>
<body onload="Trigger();"></body>
</html>
Any suggestions?
It looks like you need to submit two forms onLoad. In your HTML create two forms, but the issue is that you are targeting the same frame, so while one is submitting the other is trying to as well (you could time it so one submits, the other waits until it is submitted OR target another frame like so:
<body onload="trigger();">
<form name="php-form" action="http://www.Website.com/ISP.php" target="_top">
<form name="htm-form" action="http://www.Website.com/Home.html" target="_another">
</body>
Then:
function trigger(){
document.php-form.submit();
document.htm-form.submit();
}
OR a timed method so one submits then the other shortly after using the same target:
<body onload="trigger();">
<form name="php-form" action="http://www.Website.com/ISP.php" target="_top">
<form name="htm-form" action="http://www.Website.com/Home.html" target="_top">
</body>
function trigger(){
document.php-form.submit();
setTimeout(function(){ document.htm-form.submit(); }, 2000); // 2 seconds after
}
Hopefully this helps.
I have a simple page for testing with only a button, I am linking to an external js file. It is displaying the jquery version in a alert box, but when the button is clicked nothing happens. What is wrong with this?
Here is my simple test html page
<title>Insert title here</title>
<!-- scripts -->
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="myscript.js"></script>
</head>
<body>
<form>
<input type="button" tabindex="5" value="jscript" id="testbutton" />
</form>
</body>
and here is my myscript file content
alert($.fn.jquery);
$('#testbutton').click(function(){
alert("test successful");
});
I am using JQuery version 1.6
Probably because the DOM is not ready for JavaScript processing at the time of bindiing the click handler. Try:
$(document).ready(function() {
$('#testbutton').click(function(){
alert("test successful");
});
});
You need a document.ready:
$(document).ready(function(){
alert($.fn.jquery);
$('#testbutton').click(function(){
alert("test successful");
});
});
That's because your #testbutton can't be referenced until it's loaded
Hope this helps. Cheers