Why does my Ajax function returns my entire code?
- by JDelage
I'm playing with sample code from the book "Head first Ajax". Here are the salient pieces of code:
Index.php - html piece:
<body>
<div id="wrapper">
<div id="thumbnailPane">
<img src="images/itemGuitar.jpg" width="301" height="105" alt="guitar"
title="itemGuitar" id="itemGuitar" onclick="getDetails(this)"/>
<img src="images/itemShades.jpg" alt="sunglasses" width="301" height="88"
title="itemShades" id="itemShades" onclick="getDetails(this)" />
<img src="images/itemCowbell.jpg" alt="cowbell" width="301" height="126"
title="itemCowbell" id="itemCowbell" onclick="getDetails(this)" />
<img src="images/itemHat.jpg" alt="hat" width="300" height="152"
title="itemHat" id="itemHat" onclick="getDetails(this)" />
</div>
<div id="detailsPane">
<img src="images/blank-detail.jpg" width="346" height="153" id="itemDetail" />
<div id="description"></div>
</div>
</div>
</body>
Index.php - script:
function getDetails(img){
var title = img.title;
request = createRequest();
if (request == null) {
alert("Unable to create request");
return;
}
var url= "getDetails.php?ImageID=" + escape(title);
request.open("GET", url, true);
request.onreadystatechange = displayDetails;
request.send(null);
}
function displayDetails() {
if (request.readyState == 4) {
if (request.status == 200) {
detailDiv = document.getElementById("description");
detailDiv.innerHTML = request.responseText;
}else{
return;
}
}else{
return;
}
request.send(null);
}
And Index.php:
<?php
$details = array (
'itemGuitar' => "<p>Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.</p>",
'itemShades' => "<p>Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.</p>",
'itemCowbell' => "<p>Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.</p>",
'itemHat' => "<p>Michael Jackson's hat, as worn in the \"Billie Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.</p>"
);
if (isset($_REQUEST['ImageID'])){echo $details[$_REQUEST['ImageID']];}
?>
All this code does is that when someone clicks on a thumbnail, a corresponding text description appears on the page.
Here is my question. I have tried to bring the getDetails.php code inside Index.php, and modify the getDetails function so that the var url be "Index.php?ImageID="...
. When I do that, I get the following problem: the function does not display the snippet of text in the array, as it should. Instead it reproduces the entire code - the webpage, etc - and then at the bottom the expected snippet of text.
Why is that?
