jQuery code in between the page but jQuery library in footer [duplicate] - javascript

This question already has answers here:
JQuery - $ is not defined
(36 answers)
ReferenceError: $ is not defined
(7 answers)
Closed 12 months ago.
I have jQuery library in the footer to follow the good practices. It's placed right before the </body> tag. However, I have jQuery sortable code in the middle of the page inside a modal for some reason to sort photos. My sortable code was working this way few months back up to Oct, 2021. However, I did not look up on that part of module for some months and today it's not working. The console is returning this error:
Uncaught ReferenceError: $ is not defined
Example of my code:
<head>
<title>My First page</title>
</head>
<body>
<div class="sortPhotos">
<ul id="sortable" class="reorder-gallery mt-3"></ul>
<script>
$(function() {
$("#sortable").sortable({
// CODE GOES HERE
}).disableSelection();
});
</script>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

Order matters.
In your first <script> you try to call the $ function and it errors because $ isn't defined.
In your second <script> you load jQuery which defines $, but by then it is too late.
Reverse the order of your <script> elements.

It's a good practice to keep the right order when you are running any old javascript projects because the first script run sooner:
<!DOCTYPE html>
<html>
<head>
<title>My First page</title>
</head>
<body>
<div class="sortPhotos">
<ul id="sortable" class="reorder-gallery mt-3"></ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#sortable").sortable({
// CODE GOES HERE
}).disableSelection();
});
</script>
</body>
</html>
Also check your jquery path.

jQuery script elements are usually put in the head element before the body
check here to see exactly where to place the jQuery script tag

Related

Dart - `querySelector` cannot find element [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 months ago.
I wanted to use Dart to replace JavaScript.
But it's not an advanced project. It's just a matter of dynamically changing a few elements within a single page.
For starters, I wrote the following HTML code and Dart code to find the element based on its ID and display the text in the console.
<!-- index.html -->
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<p id="first-paragraph">Target.</p>
</body>
</html>
// index.dart
import 'dart:html';
void main() {
print(querySelector('#first-paragraph')?.innerText);
}
The following command converts the file to a JavaScript file.
dart compile js index.dart -o index.js -O0
However, when I open the HTML file, the console shows null.
The first code in Dart Pad HTML mode, which is very similar to the above code, appears to work (on Dart Pad).
Why can't my code find the element?
Thanks.
Thank you for your comments. I remembered from your comments and was able to get it to work as expected by placing the script readout at the end of the body element or using window.addEventListener. I am ashamed to say that I forgot to do something so simple.
<!-- index.html -->
<html>
<head>
<title>Test</title>
</head>
<body>
<p id="first-paragraph">Target.</p>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
or
// index.dart
import 'dart:html';
void main() {
window.addEventListener('DOMContentLoaded', (event) {
print(querySelector('#first-paragraph')?.innerText);
});
}

Basic code not working with jQuery [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
I am very new to jQuery, literally just trying to get it to work for the first time. Only the alert box works, but none of the other very simple methods I am trying out. Here are the files:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="myJavaScript.js"></script>
</head>
<body>
<h1 id="title">This is a title</h1>
<p> This is some sample text.</p>
</body>
</html>
JavaScript file:
$(document).ready(function (){alert("this works!")});
$("#title").text("but this is not not working");
As you can see the example can't be simpler. I have off course downloaded the jquery-3.1.0.min.js file and put it in the same folder as the html. If I comment out the link, the alert stops working, so I now the file is being referenced OK. Why is the second line of jQuery not working? Many thanks, P
Because the DOM(the entire structure of your application) isn't loaded yet. You need to use a $(document).ready(makes sure the DOM is loaded before running jQuery code) or an event handler to make the change visible.

document.getElementById is not working [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
document.getElementById() doesn't work? [duplicate]
(7 answers)
Closed 7 years ago.
im new to javascript and want to fill a div with some text. but it doesn't work.
in the documentation this is the common way to do this. but, why doesn't work this for me?
my code is
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</head>
<body>
<div id="mytest"></div>
</body>
</html>
You need to move your script to the end of your HTML. Right now, you're executing the script BEFORE your HTML has been parsed so the document is empty and thus document.getElemntById('mytest') does not find anything.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</body>
</html>
See this other answer for a lot more discussion of this issue and other options if you don't want to move your <script> tag:
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
thats because, in your document, the javascript is load at the first, but the div with the id mytest is not loaded at this moment.
you have 2 options to get this working:
first: say javascript to wait until the dom is loaded completly
window.onload=function(){
document.getElementById('mytest').innerHTML="hey";
}
second:
put your script code at the bottom, so the javascript is loaded at least.
but i would prefer the first solution.
best
Try in this way
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
</body>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</html>
Js fiddle

Cannot set property "onchange" of null [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
I'm trying to get the element with getElementById(), but it returns null even though the element exists. What am I doing wrong?
<html>
<head>
<title>blah</title>
<script type="text/javascript">
alert(document.getElementById("abc"));
</script>
</head>
<body>
<div id="abc">
</div>
</body>
You have to put this in a document load event. The DOM hasn't gotten to abc by the time the script is executed.
Your script runs before the DOM has been loaded. To fix this you can place your code in the window.onload function like so:
window.onload = function() {
alert(document.getElementById("abc"));
};
An alternative is to place your script right before the closing </body> tag.
If you don't want to attach to the load event then simply put your script at the bottom of the body, so it will execute at the end-
<html>
<head>
<title>blah</title>
</head>
<body>
<div id="abc">
</div>
<script type="text/javascript">
alert(document.getElementById("abc"));
</script>
</body>
</html>
This is because the script runs before the page has rendered.
For proof add this attribute to the body tag:
<body onload="alert(document.getElementById('abc'));" >
But it doesn't exist, not at that point in the HTML. HTML documents are parsed top-to-bottom, just like programs run. The best solution is just to put your script tag at the bottom of the page. You could also attach your JavaScript to the onload event.

Beginner javascript text display [duplicate]

This question already has answers here:
Code working in jsFiddle but not in browser
(2 answers)
Closed 9 years ago.
I am having a problem with my JavaScript, when I put it into JSFiddle it works fine. But it wont work locally? Here is the fiddle: http://jsfiddle.net/4Ukkz/
var String = "preacher preacher, 5th grade teacher";
document.getElementById('text').innerHTML=String;
So the problem is. In the JSFiddle, the text will display, But locally nothing will display.
Note. It works in the fiddle. but not on my computer
In JSFiddle, your code is automatically wrapped with
window.onload = function() {
// your code
};
This is necessary because in your code, script.js is included above <div id="text"></div>. If you don't wait until that element exists, document.getElementById('text') will return null and the attempt to set innerHTML will fail.
The solution is to wrap your code as above or move your script tag below the div.
May be you don't have a script.js file with the javascript code you pasted in the fiddle?
And move the script element after your body. So your JavaScript code runs after all the elements in the body have been created.
So something like this:
<html>
<title>hi</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="text"></div>
</body>
<script type='text/javascript' src='script.js'></script>
</html>

Categories