This question already has answers here:
JavaScript: Inline Script with SRC Attribute?
(3 answers)
Closed 5 years ago.
<script type="text/javascript" src="jquery-2.0.3.min.js">
alert("hello");
</script>
I wrote an inline function that for some reason when I ran onclick says it doesn't exists so I tried to simplify it completely till it works but I found out even this code doesn't work. It does work on a empty page though!It is located under all my other code in said page; no body tags only DIVs - right after the last div .Maybe it is because of the frameworks I'm using? I have firebase/angularjs/nodejs. I also tried to do document ready calls and console.log(); getting no errors but also nothing popping up either.
EDIT: it is literally not a duplicate because I tried all other solutions. Here is more code: I tried to put it into the last div and outside of it.
<!-- <a class="btn-for-pw" ng-href="">Forgot Password?</a> -->
</form><!-- end of #signupForm -->
</div>
<!--Footer-->
<div class="modal-footer text-center">
<a ng-href="#/register">Create an Account</a>
</div>
</div>
<!--/Form with header-->
</div>
</div>
<script type="text/javascript" src="jquery-2.0.3.min.js"/>
<script>
alert("hello");
</script>
Try putting another script tag after you include your jQuery source. as the script inside will be disregarded.
Here is a jjsFiddle
<script type="text/javascript" src="jquery-2.0.3.min.js"/>
<script>
alert("hello");
</script>
Good luck :-)
Related
This question already has answers here:
How to make the HTML renders before the alert is triggered?
(4 answers)
placing <script> tags right before </body> doesn't work as expected
(3 answers)
Closed 1 year ago.
My javascript is running before my HTML loads, even if I put it right before the like this:
<body>
<h1>Title</h1>
<script>
alert("yo");
</script>
</body>
Any ideas why that may be happening?
Any ideas why that may be happening?
alert is blocking, script evaluation comes before DomContentLoaded (DCL) and subsequent first content paint (FCP) which is why it doesn't show Title before alert starts blocking the dom.
You could run it this way:
<body onload="alert('yo')">
<h1>Title</h1>
</body>
Or this way:
<body onload="my_function()">
<h1>Title</h1>
<script>
function my_function() {
alert('yo');
}
</script>
</body>
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.
This question already has answers here:
.append(), prepend(), .after() and .before()
(9 answers)
Closed 7 years ago.
Why the code below doesn't work, but It will work after I use before() and after() to replace prepend and append.
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").prepend("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").append("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="/images/logo.png" >
<br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>
Thanks,
Ethan
The <img /> is an empty tag, which means, nothing can be appended or prepended. So you need to either insert the new HTML before it or after it. That's why neither append() nor prepend() works, but before() works, because, it puts the content before <img tag and not inside it.
Better example with div:
<!-- Our Target -->
<div class="myDiv">Hello, World!</div>
<!-- Prepend("Hi: ") -->
<div class="myDiv">Hi: Hello, World!</div>
<!-- Append(" - Praveen ") -->
<div class="myDiv">Hello, World! - Praveen</div>
<!-- Before("Hi:) -->
Hi:
<div class="myDiv">Hello, World!</div>
Hope the above clarifies you about the three functions.
Because prepend tries to place it in the <img> tag before all the content, and before() places it before the <img> tag.
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
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.