Home/ Questions/Q 8853321
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T13:37:25+00:00

I’m playing with sample code from the book Head first Ajax. Here are the

  • 0

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?

PS: OK, I now understand my problem, thanks to the two responses below. When I call the url "Index.php?ImageID="..., I am not just loading the part that correspond to the $_GET. I am loading the entire page, now with a non-null $_GET value. This makes it clear why I need to have a separate page just for the stuff I want to add.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you recognize the request for image info, you spit out the data, but you do nothing to prevent the rest of the script from running. You could change

    if (isset($_REQUEST['ImageID'])){echo $details[$_REQUEST['ImageID']];}

    to something like

    if (isset($_REQUEST['ImageID'])){
  echo $details[$_REQUEST['ImageID']];
  exit;
}

    Still, I’d recommend using a separate URL for the image info. A URL should describe the resource found there, after all.

    • 0