getting .get() in jquery to work
I have been trying to practice jquery using the .get() function but it's not working. Here is my code:
<html>
<head>
<title>Testing Site</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#id").click(function(){
$('#hello').css('background-color', 'blue');
$.get("test.php", function(data){
$('body')
.append( "Name: " + data.name )
.append( "Time: " + data.time );
$('body').css('background-color', 'red');
}, "json");
});
});
</script>
</head>
<body>
<span id="hello">Hello World!</span>
<input type="button" id="id" value="Click Here"></input>
</body>
</html>
I basically modified the .get() example on the jquery api site. But when I click the button nothing happens! (There must be something wrong because the background color isn't changing either...) I have the correct path names and I copyed the correct php file:
<?php echo json_encode(arr开发者_开发百科ay("name"=>"John","time"=>"2pm"));
?>
I also tried implementing an example on http://www.chazzuka.com/ajaxify-your-web-pages-using-jquery-88/ which used the .get() which didn't work. On firefox nothing happened and on Google Chrome it only worked part way... I'm not sure if anyone cares to try to implement that code, but that code made me wonder about this .get() function: how does it work? In that example it is supposed to retrieve info from a plain html file. I assumed that it would only work for something like a php file which made the server send back info when you make the call "echo..."
Since your code is in the head of your page, it will execute prior to the DOM being created. You need to make your code wait until the DOM is ready. You can do this by wrapping your code in document.ready as so:
$(function(){
// code goes here
});
The problem is that the script is not even getting called because the binding happens before the page is fully loaded.
You'll need to wrap your code in a
$(document).ready(function() {
// your code
});
block.
Check out the jQuery website for more on .ready
You're not waiting for DOM ready. When your code runs, $("#id") does not return anything, since that div hasn't been loaded yet.
Wrap your code in $(document).ready(function(){}):
$(document).ready(function(){
$("#id").click(function(){
$('#hello').css('background-color', 'blue');
$.get("test.php",
function(data){
$('body').append( "Name: " + data.name )
.append( "Time: " + data.time )
.css('background-color', 'red');
}, "json");
});
});
You need to put the click event binding in the document ready event of jQuery. With the current code, when you are trying to bind the click event to #id element, #id is not yet available in DOM hence jQuery cannot find the element.
Try this:
$(function(){
$("#id").click(function(){
$('#hello').css('background-color', 'blue');
$.get("test.php",
function(data){
$('body').append( "Name: " + data.name )
.append( "Time: " + data.time );
$('body').css('background-color', 'red');
}, "json");
});
});
Your script is executing before the element exists.
Move the <script> to the end of the <body>.
Wrap your code in $(function(){ }) because element should be available to jQuery for it to attach the event handler. This will execute the code when DOM is ready.
$(function(){
$("#id").click(function(){
$('#hello').css('background-color', 'blue');
$.get("test.php",
function(data){
$('body').append( "Name: " + data.name )
.append( "Time: " + data.time );
$('body').css('background-color', 'red');
}, "json");
});
});
Javascript is executed as it is come to in the document. You want to use jQuery's ready function to have your script wait for the DOM to be ready.
$(document).ready(function(){
// Code to execute
});
Or use the shortcut (functions exactly the same as above).
$(function(){
// Code to execute
});
You need to put the eventhandler in $(document).ready(function() {}); and use backgroundColor instead of background-color. In Javascript CSS keys do not have "-" in it, instead they're written together and the second word thick - like backgroundColor or textShadow ;)
$(document).ready(function() {
$("#id").click(function(){
$('#hello').css('backgroundColor', 'blue');
$.get("test.php",
function(data){
$('body').append( "Name: " + data.name )
.append( "Time: " + data.time );
$('body').css('backgroundColor', 'red');
}, "json");
});
});
should work (untested)
Is the #id-element embedded in the site, or post-loaded with Ajax? If so, you have to use the following code:
$(document).ready(function() {
$("#id").live({
click: function(){
$('#hello').css('backgroundColor', 'blue');
$.get("test.php",
function(data){
$('body').append( "Name: " + data.name )
.append( "Time: " + data.time );
$('body').css('backgroundColor', 'red');
},
"json"
);
}
});
});
加载中,请稍侯......
精彩评论