my first Ajax code won't work

Question

arcticM

11 Years Ago

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.

javascript

2 Contributors
3 Replies
219 Views
6 Days Discussion Span
Latest Post 11 Years Ago Latest Post by arcticM

All 3 Replies

dany12 13 Light Poster

11 Years Ago

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 ');

    });


});

Reply to this topic

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.

arcticM · Answer 1 · 2012-06-12T13:14:06+00:00

they wrote getElementByTagName instead of getElementsByTagName

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

arcticM · Answer 2 · 2012-06-19T06:26:25+00:00

@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..

my first Ajax code won't work

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers