Im a jquery starter so if its a wrong one forgive me :)
I just want to know why placing the content at different positions made this script working, although to my best i think script to kept in head section of the document. Please explain the concept.
Working Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example 2</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
</p>
<script type="text/javascript">
jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
</script>
</body>
</html>
Not Working
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example 2</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
</script>
</head>
<body>
<p>
</p>
</body>
</html>
In the second instance the code is executed before the <p> has been parsed into the DOM tree, so while it still works there's nowhere to put the output text into. In other words, jQuery("p") matches no element so .html() "does nothing".
You can fix this by either waiting for the DOM to be fully parsed:
jQuery(function() {
jQuery("p").html(...);
});
or by using an output mechanism that does not depend on the <p> existing, such as alert() or console.log().
Well, it seems that your browser firstly load <head> section thus in second example there is no p element then.
In both cases you should wrap your code in $(function(){ ... }).
If you place your script before the <body> element, it is executed before the DOM tree is loaded/parsed. The <p> element does therefore not exist and cannot be found. You can:
Place the script after the <body> tag (like in your first example)
or you can call your function after the ready event has been fired:
$(document).ready(function() {
jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
});
Related
I've read a bunch of different posts and I can't figure out why this isn't working for me. Any help would be greatly appreciated. I'm sure it's something simple.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
$("body").children().each(function() {
$(this).html($(this).html().replace(/®/g,"<sup>®</sup>"));
});
</script>
</head>
<body>
<div>HelloWorld®</div>
</body>
</html>
you must wait after page ready so add your function inside $(document).ready(function(){....}) or move your <script>...</script> tag as last element inside <body>...</body>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>HelloWorld®</div>
<script type="text/javascript">
$("body").children().each(function() {
$(this).html($(this).html().replace(/®/g,"<sup>®</sup>"));
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").children().each(function() {
$(this).html($(this).html().replace(/®/g,"<sup>®</sup>"));
});
});
</script>
</head>
<body>
<div>HelloWorld®</div>
</body>
</html>
I have tested your code and it works for me. I output to the console the contents of the element before and after modifying them:
$("body").children().each(function() {
console.log($(this).html());
$(this).html($(this).html().replace(/®/g,"<sup>®</sup>"));
console.log($(this).html());
});
And the result is:
HelloWorld®
HelloWorld<sup>®</sup>
Check it here:
https://jsfiddle.net/m6kLgpj7/
Are you getting a different result? What is the problem you are observing?
To be honest I would probably just target the element by giving it a unique ID rather than iterate over every element in the body. However since that is the approach you asked about, this is how I would do it:
$(document).ready(function() {
$("body").children().each(function(idx, elem) {
var newHtml = $(elem).html().replace(/®/g, "<sup>®</sup>");
$(elem).html(newHtml);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Untitled Document</title>
<body>
<div>HelloWorld®</div>
</body>
I think it's more clear when you use the second parameter that the jQuery each method provides (the element), rather than using 'this' all over the place....just my personal preference.
Also, take note of the document ready method i placed the rest of the script in to ensure. This ensures the script does not manipulate the DOM until the DOM is ready.
I have added jQuery Library 2.1 as javascriptResource in the project. As shown in the picture.
In the index.html, the autocomplete for ready works but, ready function is not called.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello");
});
</script>
</head>
<body>
What could I be missing?
Having it available under JavaScript Resources makes it known to the tools, and available for Content Assist at edit-time. It doesn't change the behavior at runtime in the browser--something still has to reference the jQuery file from your web page, like a script tag.
Try to include the jquery script. Example:
<head>
<script src="jquery-1.11.2.min.js"></script>
</head>
Source : http://www.w3schools.com/jquery/jquery_get_started.asp
Hope it helps.
I am trying to learn how to debug jquery. I tried to make a page which will dynamically add input feilds. The data is sent to the jquery. Now for debugging, I tried to console.log the whole array, but I am getting this error in Firefox:
[17:40:27.073] The character encoding of the HTML document was not
declared. The document will render with garbled text in some browser
configurations if the document contains characters from outside the
US-ASCII range. The character encoding of the page must be declared in
the document or in the transfer protocol. #
file:///Users/ateevchopra/Desktop/takemehome%20dynamic/TakeMeHome/index.html
Please explain what this means of if there is some mistake in my code. Heres my code
HTML:
<!doctype html>
<html>
<head>
<title>TakeMeHome</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type='text/javascript' src='js/app.js'></script>
</head>
<body>
<center><form id="details">
Your Place:<input id="source" type="text"><br><br>
Friend1:<input id="friend1" type="text"><br><br>
<div id="friends"></div>
<div id="button">Add!</div><br><br>
<input type="submit" value="go">
</form>
</body>
</html>
jQuery:
var j=2;
var friends = [];
$(document).ready(function(){
$('#button').click(function(){
if(j<11){
$('#friends').append('Friend'+j+':<input type="text" id="friend'+j+'"/><br/><br/>');
j++;
}
else
{
alert("Limit reached");
}
});
});
$("form").submit(function(){
friends[0] = ('#source').val();
for(var i=1;i<j;i++)
{
friends[i] = ('#friends'+i+'').val();
}
console.log(friends);
});
your code is working perfectly you can see it from this
console.log is good for debuging but i prefer you to use firebug for debuging.
Using firebug you can debug each and every line and you can also view the values of each variable.
I am using firebug with firefox.
You can download firebug for firefox from that link .I hope that it helps you.
The error has nothing to do with JavaSCript.
If you add a meta tag like <meta charset="UTF-8" /> it should be fixed.
I also see the you have a type in doctype declaration.
This is not an error in your Javascript code, but a general warning issued by Firefox regarding the validity of the actual HTML markup.
The document's encoding should be declared with a meta tag in inside the header tag. For example, if your encoding is UTF-8 it would be:
<head>
...
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
</head>
Since your doctype is HTML5, you can also use the charset attribute:
<head>
...
<meta charset="UTF-8">
...
</head>
I'm reading over the "Getting Started" part of YUI and I can't get the basics to work. What am I doing wrong in this code sample that won't allow this contentNode to print? When I try to view it in the browser, nothing happens.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>YUI</title>
<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
<script>
YUI().use('node', function (Y) {
// Create DOM nodes.
var contentNode = Y.Node.create('<div>');
contentNode.setHTML('<p>Node makes it easy to add content.</p>');
});
</script>
</head>
<body>
</body>
</html>
This is just something that might not have been clear with the "Getting Started" section of YUI, but Y.Node.create makes a Node object, but doesn't attach it to the DOM yet. If you want to do that, just add one more line to your code to do so (such as append/prepend/insert/etc.):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>YUI</title>
<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
<script>
YUI().use('node', function (Y) {
// Create DOM nodes.
var contentNode = Y.Node.create('<div>');
contentNode.setHTML('<p>Node makes it easy to add content.</p>');
// Attaches created node to the DOM
Y.one('body').append(contentNode);
});
</script>
</head>
<body>
</body>
</html>
I downloaded sizzle.js from https://github.com/jquery/sizzle
my code is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="sizzle.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=load;
function load(){
alert(Sizzle("#test"));
alert(Sizzle("#test").innerHTML);
}
</script>
</head>
<body>
<div id="test">abc</div>
</body>
</html>
but alert "[object]", "undefined", please tell me what's wrong with my code?
The Sizzle() function returns an array of matched elements. So if you know there'll be exactly one matching element (which there should be if you're selecting by id) try:
alert(Sizzle("#test")[0].innerHTML);
You've did a slight mistake it returns NodeList not a single Node.
The NodeList is like an array but used for storing Nodes. You may probably want to use the first one.
// this is how you do it
alert( Sizzle('#test')[0].innerHTML );