In my templates I include the jquery and jquery.cookie.js, but get the below error:
The below is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cookie-login1</title>
</head>
<body>
<form action="/cookie/login1/" method="post">
<input type="text" name="username">
<input type="text" name="pwd">
<input type="submit" value="add">
<input id="btn" type="button" value="button-add">
</form>
</body>
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/jquery-2.1.4.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.ajax({
url:'/cookie/login1/',
type:"POST",
data:{'username':'root', 'pwd':'123'},
success:function(response){
}
})
})
})
</script>
</html>
My jquery version is 2.1.4, and my jquery.cookie.js version is 1.4.0.
The html document parse order is from top to bottom , you should import the jquery first:
<script src="/static/js/jquery-2.1.4.min.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
You have to import jQuery befor jquery.cookie.js.
jquery.cookie.js needs jQuery but you compiler doesn't know it to this time because you load it before jQuery.
<script src="/static/js/jquery-2.1.4.min.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
Related
I'm learning both HTML and JavaScript and I am getting this error: ReferenceError: $ is not defined. I was already getting this error and was told to add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> to the <head>, which I did.
I was also told to make sure all jQuery javascript code is being run inside a code block such as:
$(document).ready(function () {
//your code here
});
I did so. However, I'm still getting the same error.
What's the reason, then? Am I using a wrong version? What's wrong? Here's the full code:
html.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="common.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="org-bar">
<h1 style="font-size:20px;">Criar Organização</h2>
<form id="orgCreation" action="welcome.php" method="post"></form>>
<label for="orgName"></label>
<input class="textInput" type="text" id="orgName" name="orgName" placeholder="Nome da Organização [5-20]" minlength="5" maxlength="20">
<label for="orgAbb"></label>
<input class="textInput" type="text" id="orgAbb" name="orgAbb" placeholder="Abreviatura da Organização [3-4]" minlength="3" maxlength="4">
<input class="button" type="button" id="orgButton" value="Criar">
</div>
</form>
</div>
<script src="orgcreation.js" type="text/javascript"></script>
</body>
</html>
You can see I first call jQuery on the head and only on the bottom of the body do I call the javascript file.
orgcreation.js
$(document).ready(function(){
$("orgButton").click(function(){
mp.trigger('orgCreation', $('#orgName').val(), $('#orgAbb').val());
});
});
what am I doing wrong here? I got a separate js file from my html but onclick doesn't seem to reach the js file I have. It works though if I place the function code inside the html. Help me.
//jlhtml.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text\javascript" src="jljs.js"></script>
<meta charset="utf-8">
</head>
<body>
<center>
<fieldset>
<p>
Search here: <input type="text" id="txtsearch"/>  
<button onclick="Search()">Find now</button>
</p>
</fieldset>
</center>
</body>
</html>
//jljs.js file below
function Search()
{
var me = (d3.select("#txtsearch").property("value"));
alert(me);
}
I created a short snippet which binds the Search function to the button click event using d3.
var searchButton = d3.select("#searchButton").on("click", Search);
function Search() {
var me = (d3.select("#txtsearch").property("value"));
alert(me);
}
<!DOCTYPE html>
<html lang="en">
<script src="https://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<body>
<center>
<fieldset>
<p>
Search here: <input type="text" id="txtsearch" />  
<button id="searchButton">Find now</button>
</p>
</fieldset>
</center>
</body>
</html>
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="dependsOn-1.0.0.min.js"></script>
<script>
$(document).ready(function) {
$('#basicTest .subject').dependsOn({
'#basicTest input[type="checkbox"]': {
checked: true
}
});
});
</script
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="basicTest">
<label>
<input type="checkbox"> Check me
</label>
<input type="text" class="subject">
</form>
</body>
</html>
I am actually trying to implement the basic example which is after click on the "check me" a input box gets displayed. By using the depends on plugin is is not working. These are the files. I placed the script in between the html and head tags. Any suggestions are welcome!
i have a external JavaScript which don't work in my HTML File and i don't know why Firebug doesen't report any failure.
If i run the JS in my HTML it works perfect.
action.js
$( document ).ready( function(){
var ochk1 = $("input[type='checkbox'][id='oose']");
var ochk2 = $("input[type='checkbox'][id='ov']");
var ochk3 = $("input[type='checkbox'][id='op']");
ochk1.on('change', function(){
ochk2.prop('checked',this.checked);
ochk3.prop('checked',this.checked);
});
});
and my html
test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
#import url("style.css");
</style>
<script language="javascript" type="text/javascript" src="./action.js"></script>
</head>
<body>
<div>
<div class="box">
<input type="checkbox" id="oose">
OOSE
</div>
<div class="bs">
V
<input type="checkbox" id="ov">
</div>
<div class="bs2">
P
<input type="checkbox" id="op">
</div>
</div>
</body>
</html>
You can insert jquery with the following code:
<script src="jquery_file.js" type="text/javascript"></script>
or you can download the jquery file from their homepage and reference the downloaded file in your document. Here is the link where you can download jquery: https://jquery.com/download/
You need to load the jQuery first.
<script src="your_jquery_file.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="./action.js"></script>
This question already has answers here:
jQuery plugin conflicts - please assist
(6 answers)
Closed 7 years ago.
Attempting to open a Fancybox once a form is submitted. I am also trying to do an ajax call to a php script ... don't exactly know where to put that in. Here is the code. If anyone has any ideas I would really appreciate it. As you can probably tell I have no idea what I am doing with AjaxForm.
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43"></script>
<link href="xtras/css/style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<!--[if IE 6]><link href="xtras/css/style-ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]><link href="xtras/css/style-ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
<script type="text/javascript">
$(document).ready(function() {
$("#signup").ajaxForm(function() {
alert("TEST")
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="container">
<div id="pillar">
<h1>Test</h1>
<form action="GET" id="signup" name="signup" >
<input name="email" id="email"></input>
<input id="submit" name="submit" type="submit"></input>
<a href="javascript:document.signup.submit();" >SUBMIT</a>
</form>
</div>
</div>
</body>
I also tried this:
$(document).ready(function() {
$("#myForm").ajaxForm({
success: function(responseText){
$.fancybox({
'content' : responseText
});
}
});
});
Anyone know where I am going wrong? Thanks in advance.
I adapted this from the examples on the FancyBox page (tip #5) to work with the Forms plugin. IT may work out of the box or you might need to tweak. However if you were to instead use the example minus the validation from that blog page that should work without fail and it does the same thing youre doing with the forms plugin anyhow.
JS:
$(document).ready(function() {
$('a#signup').fancybox();
$("#signup_form").ajaxForm({
beforeSubmit: function(){ $.fancybox.showActivity();},
success: function(data){
$.fancybox(data);
}
});
});
HTML:
Signup
<div style="display: none;">
<form action="POST" id="signup_form" name="signup">
<input name="email" id="email" />
<input id="submit" name="submit" type="submit" value="Sign Up" />
</form>
</div>