I am unable to get this piece of code working. I am running this on xampp. The alert works fine but the html wont load. Please help.
I have added the links to jquery 3.2.1
index.html
$(document).ready(function(){
$("#buttonClick").click(function(){
alert("Hello");
$("#viable").load('new_123.html');
});
});
</script>
New_123.html
<html>
<body>
<h1>Hello 123</h1>
</body
</html>
Your body tag is missing a closing bracket ">".
I have used the same code and i mgetting the result properly May be that '>' is an issue!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#buttonClick").click(function(){
var d= $("#viable").load('b.html');
});
});
</script>
</head>
<body>
<div id="viable"></div>
<button id="buttonClick"></button>
</body>
</html>
Related
Here is the code. I'm over Arch Linux, if this is a important thing...I'm tired of trying different libraries, in local, from jquery's site but it does't work...
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Put your jQuery call and your custom script in separate tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
Note that with HTML5 you don't need to specify type for JavaScript.
Wrong way of using script tag !
Make sure you properly wrapped your jQuery code inside a <script></script> block. Also close all open script blocks.
This should work
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Working sample
I have typed in the javascript just as you have but on a separate file linked through the HTML file. The button shows up however I am not getting any alert when it is clicked. My code is as follows:
Javascript(index.js):
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
</html>
Anyone know why my button is not working? It seems to me all my code is in order unless I am overlooking something.
Your code is being executed prior to the element it refers to existing in the page. Move the JavaScript to the end of the document or wrap it in a window.onload function.
window.onload = function () {
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
}
jsFiddle example
You need to wait for the document to be constructed before you can reference elements in it.
Put your script tag in body, just before the end. This will ensure that the document is there when the script runs.
Or, you can wrap your js in a load listener like this
window.addEventListener("load", function(){
//...your stuff here
})
You should not put <script type="text/javascript" src="index.js"></script>
before <body></body>, because when the browser is trying to register the event, the <button> is not loaded already. So when you take a look at the control panel, you would get something like TypeError: document.getElementById(...) is null.
The right version might be
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
Sometimes you should put script code below the button
<button id="myButton">Click</button>
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
first thing is you haven't included jquery in your code, change your HTML to this
!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
and your index.js to
$(document).ready(function(){
$('#myButton').click(function(){
alert("Hi");
});
});
this worked for me hope this work for you too
I have an image.html file in dreamweaver.
in source code I link an js file called img.js
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>PHOTO</title>
<script language="javascript" type="text/javascript" src="js/img.js"></script>
</body>
</html>
if an use an alert in img.js
alert("My First Jquery Test");
it shows correctly in web page but if write some javascript code like
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
The paragraph above was changed by a script.
nothing shows..why and how I show this?
The script is working as you can see here.
Report your fully HTML file if still have problem.
Remember:
<html>
<head></head>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Do it right
edit img.js
window.onload=function(){
alert("My First Jquery Test");
document.getElementById("p2").style.color="blue";
}
The system at JSFiddler seems to think this is Ok too, but won't display the alert either. http://jsfiddle.net/dmafackler/zEEpB/3/
<!doctype html>
<html>
<head>
<title>foobar</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
$(document).ready(function() { alert("Is anybody home?"); });
</script>
</head>
<body>
<p>Copasetic.</p>
</body>
</html>
<script> tags aren't self-closing. You need to provide a closing tag:
<script type="text/javascript" src="jquery.js"></script>
If you don't, the HTML isn't parsed correctly:
I have an h2 element with an id of title and I have the following script:
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
)};
</script>
The background-color is not changing though and I can't figure out why?
<html>
<head>
<title>Table Sorter</title>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablsorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
)};
</script>
</head>
<body>
<h2 id="title">Table Sorter</h2>
</body>
</html>
<script type="text/javascript">
$(document).ready(function()
{
$("#title").css("background-color","red");
$("#myTable").tablesorter();
}
);
</script>
Replace
<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
with
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
You also have a syntax error in your jQuery function at the closing brackets. They should be
$(document).ready(function(){
$("#title").css("background-color","red");
});
If that still does not fix your problem, then put an alert in there like this...
$(document).ready(function(){
alert("Howdy!");
});
If you do not see the alert message, then your jQuery script is not loaded, which means the relative path in the SRC attribute is incorrect.
It seems you've made another typo:
<title>Table Sorter</table>
^^^^^
Replace table with title:
<title>Table Sorter</title>
Can you get it working without jQuery? Try:
document.getElementById("title").style.backgroundColor = "#F00";
instead of your current script. If this does not work, check that you have well-formed HTML.
UPDATE: now that you've posted your HTML, I can see that you need to use a script tag instead of a link tag to import jQuery
Replace
<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
with
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
Here you go. Other people have pointed out some small problems you had, such as using a link tag where you need a script tag, etc. This code works for me:
<html>
<head>
<title>Table Sorter</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
});
</script>
</head>
<body>
<h2 id="title">Table Sorter</h2>
</body>
</html>
It looks like there was a typo in your code at the end of your $(document).ready section where you had )}; instead of });. If you use Firefox you can open up the error console and view any Javascript errors or warnings.
Ok, I figured it out and I don't know why it is was happening. Below the JQuery script tag, I had another script tag:
<script type="text/javascript" src="/js/jquery.tablsorter.min.js"/>
When I removed the above, it worked. But I don't know why?