ReferenceError: $ is not defined [jQuery] [CEF] - javascript

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());
});
});

Related

JQuery .val not working

I've checked a number of related questions/answers on SO but can't find a solution. I have the following code:
<html>
<head>
<title>Admin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#">
<script src="jquery-3.3.1.js"> </script>
</head>
<body>
<div>Test area</div>
<br/>
<script>
document.write('<button onclick="updateFunc()">TEST</button>');
document.write('<input type="text" id="mytext">');
function updateFunc()
{
document.write($('mytext').val());
}
</script>
</body>
</html>
The output When I click the TEST button is:
undefined
Don't know what I'm doing wrong here. I've tried moving things around, e.g. order of javascript, taken the HTML out into the HTML body rather than "printing" it in the JS, but still I keep getting undefined. I inspected the element and I get:
<input type="text" id="mytext">
in the browser.
Change to $('#mytext').val() since it is ID (#) selector.
<script>
document.write('<button onclick="updateFunc()">TEST</button>');
document.write('<input type="text" id="mytext">');
function updateFunc()
{
document.write($('#mytext').val());
}
</script>
You forgot the "#" in your jQuery selector.
function updateFunc()
{
document.write($('#mytext').val());
}

I dont get a response from Google Books API?

I am trying to make a Simple web app that can Search for books details using the Google Books API. The Code seems fine, but i dont understand what am I missing?
Here is the Code for Reference.:-
$(document).ready(function(){
$("#myform").submit(function(){
var search = $("#books").val();
if(search=='')
{
alert("Please enter something in the field");
}
else{
var url='';
var img='';
var title='';
var author='';
console.log("Search for "+search);
$.get("https://www.googleapis.com/books/v1/volumes?q="+search,function(response){
for(i=0;i<response.items.length;i++){
title=$('<h5>'+response.items[i].volumeInfo.title + '</h5>');
author=$('<h5>'+response.items[i].volumeInfo.authors + '</h5>');
img=$('<img><a href=' + response.items[i].volumeInfo.infoLink + '><button>Read More</button></a>');
url=response.items[i].volumeInfo.imageLinks.thumbnail;
img.attr('src',url);
title.appendTo("#result");
author.appendTo("#result");
img.appendTo("#result");
}
});
}
});
return false;
});
Here is the HTML Code for Reference:
<head>
<meta charset="UTF-8">
<title>Your Personal Library</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Antic'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css">
</head>
<body bgcolor="#232733">
<div align="center">
<div class="login">
<h1>The School Bag</h1>
<form id="myform">
<input type="search" id="books" placeholder="Type the book name" required="required" />
<button class="btn btn-primary btn-block btn-large" >Submit</button>
</form>
</div>
<div id="result">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="myscript.js"></script>
<!--<script src="scripts/googlebooks.js"></script>-->
<script src='https://use.edgefonts.net/amaranth.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</body>
</html>
Everything is running fine, except I cannot log any response to the Console. I am not getting any response In fact. Please help. i am stuck.
The page reloads every time you submit your form, that's why you're not getting any results back.
$("#myform").submit(function(e){
e.preventDefault()
Stop it from reloading with preventDefault() and you should be good.

jQuery plugin is not working(depends-on)

<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!

Using map function of jquery to alert the values of checkbox

HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JobSeeker Registration Page </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="../jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="try.js"></script>
</head>
<body>
<div>
<form>
<input type="checkbox" name="cb" value="First" /> First
<input type="submit" value="Submit" id="sm" /> Submit
</form>
</div>
</body>
</html>
Jquery Code:
$(document).ready(function(){
//alert("hello");
$("#sm").click(function(event){
event.preventDefault();
var searchIDs =
$(".cb:checked").map(function(){
return $(this).attr('value');;
}).get();
alert(searchIDs.join(','));
});
});
I am trying to alert the values of the checkbox on to the browser. But no data is coming. Could anybody please tell me what is the problem with the above code.
You haven't added a class called .cb to your inputs so your selector is never picking them up.
Try this:
$("input[name=cb]:checked")
Or add the missing class:
<input type="checkbox" name="cb" class="cb" value="First" /> First

Open Fancybox (or equiv) from form imput with a href [duplicate]

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>

Categories