Hi I'm trying to use jQuery to load an html document into an existing html document.
I've tried using the code below, but the text doesn't load.
I'm not sure why. Could someone point me towards what I'm doing wrong please?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">$("#test").load("test.txt")</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
Try on DOM ready like
<script type="text/javascript">
$(document).ready(function(){
$("#test").load("test.txt");
});
</script>
And you also forgotted ending ;.You can also try like
$(function(){
$("#test").load("test.txt");
});
You need to add it in dom ready
jQuery(function($){
$("#test").load("test.txt")
})
The problem was when your script is executed the element with id test was not yes added to the dom so the selector $("#test") would return zero elements
Related
script tag doesnt execute if i put it in head tag but works fine if i put it in body tag ..can anybody tell me the reason behind this?? here's my code
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
</body>
</html>
That's because HTML is parsed from top to bottom. That means that when you try to get the element demo it is not yet created.
To make it work in the head tag you should add a listener that will fire when the page is fully loaded.
document.addEventListener("DOMContentLoaded", function() {
// Here the DOM elements are loaded, and you can get them with .getElementById.
document.getElementById("demo").innerHTML = Date();
});
The <head> is for including other files and libraries and such (you can also include them in the body). But if you want to actually write JS code to manipulate the body, you have to place it in the body.
Why does this code output 4 and all the other content does not get outputted?
<!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" />
<title>jQuery</title>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
var par = $("p");
document.write(par.length);
});
</script>
</head>
<body>
<p>I am one</p>
<p>I am two</p>
<p>I am three</p>
<p>I am four</p>
</body>
</html>
when document.write is called after document ready, it removes all contents from the document because it calls document.open which wipes out all the content
Looks like what you want is to just append the par.length to the body
$(document).ready(function() {
var par = $("p");
$('body').append(par.length);
});
You've executed your script when the document is ready - good. But document.write() will write directly to the exisitng document, replacing what is there, so your paragraphs disappear.
Since you're using jQuery you would do better to have jQuery add the item for you:
$("body").append("<p>Paragraph count:"+$("p").length+"</p>");
Create another tag inside body.
<div id="plength"></div>
Then add code like below
$(document).ready(function() {
var par = $("p");
$('#plength').text(par.length);
});
Running example here http://jsfiddle.net/rajeshmepco/Bk6bZ/
If you have something like the code below, it is impossible to access any node type below the head tag. I am guessing the reason is the JavaScript code executed before the rest of the document was created. But is there a way to access these nodes from the head tag. I want to access them from the head tag because I like my JavaScript code to be in one location if possible. I know jquery uses $(document).ready(). Is there something similar to that?
<!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>
<script type="text/javascript">
var div = document.getElementById('myDiv')
alert(div)
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id='myDiv'></div>
</body>
</html>
The simplest analog to jQuery's $(document).ready() is window.onload:
<!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>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById('myDiv')
alert(div)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id='myDiv'></div>
</body>
</html>
It is not as good because it will wait until all images are downloaded before it fires. If you must have the equivalent, you could use a microlib such as this one.
"I like my JavaScript code to be in one location if possible"
Yes: An external js file. It is bad practice to write js in the head. In the same way that writing styles in the head is poor. Hopefully you are using jquery for more than just the ready event, but it is an invaluable initializer even if you aren't. Write your js in a separate file, hopefully in some type of a container so you don't clutter the global namespace, and initialize it with $(document).ready();
You must wait for the 'onload' DOM event. jquery $(document).ready() is a wrapper for setting event handlers for onload.
Without jQuery you might try:
<!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>
<script type="text/javascript">
function do_onload() {
var div = document.getElementById('myDiv')
alert(div)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload='do_onload()'>
<div id='myDiv'>I am here</div>
</body>
</html>
Well as a general rule i tend to put all inline js at the end of the document anyway, only externals do i usually put in the head. However, you can use the same methods jquery uses. I dunno exactly what the jq source looks like but something like this should work (untested):
window.onDomReady = function (fn) {
if(document.addEventListener) {
document.addEventListener("DOMContentLoaded", func, false);
} else {
document.onreadystatechange = function(func){
if(document.readyState == "interactive") {
fn(func);
}
}
}
};
And then you would use it like:
window.onDomReady(function(){
// do your stuff
});
I dunno if thats completely cross browser compatible either... that would be on of the benefits of using something like jQuery instead of writing your own.
On button click, I want to hide the div. How do i do it?
<!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" />
<title>Untitled Document</title>
</head>
<script language="javascript" type="text/javascript">
function button()
{
var a = document.getElementById('approve');
document.getElementById('p').innerHTML= 'Fred Flinstone';
}
</script>
<body>
<div id="hide">
<form>
<p id="p">heya</p>
<input type="button" id='approve' value="approve" onclick="button()"/>
<input type="button" id="reject" value="reject"/>
</form>
</div>
</body>
</html>
SORRY FOR ASKING AGAIN...BUT COULDN'T FIND A BETTER METHOD. THANKS
document.getElementById('hide').style.display = 'none';
This sets the CSS code display: none; on the div, which causes the browser's rendering engine to act like the element is not even on the page (e.g. it does not occupy any space). See the CSS standard for the official description.
You can just use Jquery to make things super easy:
$("#approve").click( function() {
$("div#hide").hide() //you can just use $("#hide") if you want
});
You can show the element whenever you want with $("div#hide").show(). This will save you from having to deal with browser inconsistencies and other crap so you can just focus on producing great readable code. :)
If you use jQuery:
$(document).ready(function() {
$('#approve').click(function() {
$('#hide').hide();
});
});
I can't get my dojo working. I've tried everything.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js">
dojo.addOnLoad(function(){
console.log("page ready, can modify DOM anytime after this");
});
</script>
</head>
<body>
</body>
</html>
Take your code and put it in another script tag after the dojo script tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
console.log("page ready, can modify DOM anytime after this");
});
</script>
A script tag with an src attribute cannot also contain code, unless you use a John Resig-like hack.