Member Avatar for arcticM

I'm on the first chapter of a book "head first ajax" and I wrote the exact code the book says and it just won't work!
there are 4 thumbnails pics on my page (in div id=thumbnailPane) and when u click on 1 of the pics there should be displayed a bigger picture in a div (id=detailsPane) that is initially empty.
but when I click on any of the thumbnails nothing happens!
here's the code-
html:

<!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>
  <title>Rob's Rock 'n' Roll Memorabilia</title>
  <link rel="stylesheet" href="css/default.css" />
  <script src="thumbnails.js" type="text/javascript"></script>
</head>

<body>
  <div id="wrapper">
    <img src="images/logotypeLeft.png" alt="Rob's Rock 'n' Roll Memorabilia" 
         width="394" height="91" id="logotypeLeft" />
    <img src="images/logotypeRight.png" alt="Rob's Rock 'n' Roll Memorabilia" 
         width="415" height="92" id="logotypeRight" />

    <div id="introPane">
      <p>Are you looking for the perfect gift for the rock fan in your life? 
         Maybe you want a guitar with some history behind it, or a conversation 
         piece for your next big shindig. Look no further! Here you'll find all 
         sorts of great memorabilia from the golden age of rock and roll.</p>
      <p><strong>Click on an image to the left for more details.</strong></p>
    </div>
    <div id="thumbnailPane">
      <img src="images/itemGuitar.jpg" width="301" height="105" alt="guitar" 
           title="itemGuitar" id="itemGuitar" />
      <img src="images/itemShades.jpg" alt="sunglasses" width="301" height="88" 
           title="itemShades" id="itemShades" />
      <img src="images/itemCowbell.jpg" alt="cowbell" width="301" height="126" 
           title="itemCowbell" id="itemCowbell" />
      <img src="images/itemHat.jpg" alt="hat" width="300" height="152" 
           title="itemHat" id="itemHat" />
    </div>

    <div id="detailsPane">
      <img src="images/blank-detail.jpg" width="346" height="153" id="itemDetail" />
      <div id="description"></div>
    </div>
  </div>
</body>
</html>

the thumbnails.js code:

window.onload=initPage;
function initPage(){
    alert("yes1");
    thumbs=document.getElementById("thumbnailPane").getElementByTagName("img");
    alert("yes2");
    for(var i=0;i<thumbs.length; i++) {
        alert(i);
        image=thumbs[i];
        image.onclick=function(){
            detailURL='images/'+ this.title+'-detail.jpg';
            document.getElementById("itemDetail").src=detailURL;
            getDetails(this.title);
        }
    }
}

alert 'yes1' is popping out when I refresh the page but alert 'yes2' doesn't.

  • 2 Contributors
  • 3 Replies
  • 222 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by arcticM
Member Avatar for arcticM

they wrote getElementByTagName instead of getElementsByTagName

I'll keep this thread open just in case I'll run into another error in this book -.-'

Member Avatar for dany12

Ok do you like javascript or you don;t now baout jquery that will make your life easier in the first minute? I will show you a littlle bit

$(document).ready(function(){

 $('ul li a').click(function(){

    alert('you have clicked a menu button ');

    });


});
Member Avatar for arcticM

@dany12 don't know jquery..

ok, the code still doesn't work completely as it should.
now my problem is that text description about the item that was clicked on from the left items menu doesn't show..

here are the files-

index.html-

<!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>
  <title>Rob's Rock 'n' Roll Memorabilia</title>
  <link rel="stylesheet" href="css/default.css" />
  <script src="scripts/thumbnails.js" type="text/javascript"></script>
</head>

<body>
  <div id="wrapper">
    <img src="images/logotypeLeft.png" alt="Rob's Rock 'n' Roll Memorabilia" 
         width="394" height="91" id="logotypeLeft" />
    <img src="images/logotypeRight.png" alt="Rob's Rock 'n' Roll Memorabilia" 
         width="415" height="92" id="logotypeRight" />

    <div id="introPane">
      <p>Are you looking for the perfect gift for the rock fan in your life? 
         Maybe you want a guitar with some history behind it, or a conversation 
         piece for your next big shindig. Look no further! Here you'll find all 
         sorts of great memorabilia from the golden age of rock and roll.</p>
      <p><strong>Click on an image to the left for more details.</strong></p>
    </div>

    <div id="thumbnailPane">
      <img src="images/itemGuitar.jpg" width="301" height="105" alt="guitar" 
           title="itemGuitar" id="itemGuitar" />
      <img src="images/itemShades.jpg" alt="sunglasses" width="301" height="88" 
           title="itemShades" id="itemShades" />
      <img src="images/itemCowbell.jpg" alt="cowbell" width="301" height="126" 
           title="itemCowbell" id="itemCowbell" />
      <img src="images/itemHat.jpg" alt="hat" width="300" height="152" 
           title="itemHat" id="itemHat" />
    </div>

    <div id="detailsPane">
      <img src="images/blank-detail.jpg" width="346" height="153" id="itemDetail" />
      <div id="description"></div>
    </div>
  </div>
</body>
</html>

thumbnails.js-

window.onload = initPage;

function initPage() {
  // find the thumbnails on the page
  thumbs = document.getElementById("thumbnailPane").getElementsByTagName("img");

  // set the handler for each image
  for (var i = 0; i < thumbs.length; i++) {
    image = thumbs[i];

    // create the onclick function
    image.onclick = function() {
      // find the image name
      detailURL = 'images/' + this.title + '-detail.jpg';
      document.getElementById("itemDetail").src = detailURL;
      getDetails(this.title);
    }
  }
}

function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }
  return request;
}

function getDetails(itemName) {
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  var url= "getDetails.php?ImageID=" + escape(itemName);
  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;
    }
  }
}

and getDetails.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>"
);

echo $details[$_REQUEST['ImageID']];

?>

so pretty much I don't see the request.responseText from the php file..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.