I’ve combed the internet for a few hours and still cannot make this simple example work. I hope somebody can assist me. I’m trying to use Javascript to display the contents of a php file. The display should be refreshed often as ultimately it will be used to display text matches from a MySql db that match the characters entered in a search bar (similar to Google’s search bar). I’ll use setinterval for that but I am not there yet. My issue is that I have minial javascript/AJAX experience and just cannot make it work. I’ve dumbed it down to a bare bones request and still cannot make it work. Please suggest what isn’t working:
The index.html where the content should be viewable is:
<!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>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$().ready(function() {
$("#dynamic").load("blasty.php");
});
</script>
<div id="dynamic"></div>
</div>
</body>
</html>
And blasty.php contains:
<?php
echo "hello cruel world!";
?>
Thanks in advance!
Make sure your blasty.php file is on the same domain.
Also, to help debug javascript, right click in Chrome or Firefox and go Inspect Element. Then go to the Console window and it will display most errors.
I also recommend this youtube video about javascript. I it helped me bridge the gap on some javasrcipt gotchas. http://www.youtube.com/watch?v=ljNi8nS5TtQ
Here is a link about debuggers: https://developers.google.com/chrome-developer-tools/
As @Explosion Pills said, FireFox’s Firebug is another great option. I will use both to help debug javascript. Firebug is nice because under the Net tab it will display the acutal http requests as they happen in the background, with the params, response, header info, etc.