cssfreakie Posted February 22, 2011 Share Posted February 22, 2011 Hi all i just read a tutorial about jquery and ajax, and i am allready stuck on the very first exampleI just can't see what i do wrong. Any help is appreciated: index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/mediabox.css" /> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript"> $.ajaxSetup ({ cache: false }); var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />"; // load() functions var loadUrl = "script.php"; $("#load_basic").click(function(){ $("#result").html(ajax_load).load(loadUrl); }); </script> <title>lalala</title> </head> <body> <div class="functions" id="result"> </div> <input type="submit" id="load_basic" value="load()" /> </body> </html> script.php <?php echo 'moo says the cow'; ?> Am i missing something obvious? or violating a best practise? this is really mindgoggling me :'( This is probbaly because i never use javascript Quote Link to comment Share on other sites More sharing options...
trq Posted February 22, 2011 Share Posted February 22, 2011 You haven't actually described any issue to us. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted February 22, 2011 Author Share Posted February 22, 2011 oh crap sorry thorpe i was pretty confused at the moment of writing The thing is I expect the index.php to retieve the stuff from script.php ones someone presses the button with id #load_basic. After than the stuff from script.php should end up in side the div with id #result. I thought i did a good job, but for some reason the script.php is not loaded. Could it maybe have something to do with the position of the <script> should i maybe place it below the targeted div? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted February 22, 2011 Author Share Posted February 22, 2011 lol i put the <script below the targeted div, and now it works... I did this as a complete uneducated guess. Anyone want to enlight me why this is? I always thought the script is read from top to bottom. Quote Link to comment Share on other sites More sharing options...
trq Posted February 22, 2011 Share Posted February 22, 2011 The reason you had to move your code to after the div is because your div didn't exist when the code was initially run. Most jQuery will need to be loaded after the DOM is finished loading (this will fix your issue). this means you need to place all jQuery code within: $(document).ready(function() { // code goes here }); JavaScript should also be placed at the bottom, just prior to the closing </body> tag. This helps with page load times. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted February 22, 2011 Author Share Posted February 22, 2011 That's great advise! And i understand it now. Only the stuff exist after it has been read. thanks i will never do this wrong again That ajax is really fun to play with I think i am going to make a chat box with it Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted February 23, 2011 Author Share Posted February 23, 2011 The reason you had to move your code to after the div is because your div didn't exist when the code was initially run. Most jQuery will need to be loaded after the DOM is finished loading (this will fix your issue). this means you need to place all jQuery code within: $(document).ready(function() { // code goes here }); JavaScript should also be placed at the bottom, just prior to the closing </body> tag. This helps with page load times. Hi thorpe, Small question here so i just reopend the thread hope that is not a problem, I just googled a bit on what you said "to place javascript at the bottom" and ended up at: http://developer.yahoo.com/performance/rules.html and they recommend that too, and explain why. So i thought lets look at their source code, and what i see them doing is putting javascript even below the </html> tag but also some rigth above </body> as you said. Is there a reason why they split it up like that, or are there some things that must be placed in the body as javascript? it's nothing urgent, but i was just eager to know Thanks anyways for the great tip. the page indeed loads faster. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.