info343/lectures/ajax-with-xml/files/animalgame.js

// animalgame.js
// JavaScript code for Animal Game lecture example
// INFO 343, Autumn 2012
// Morgan Doocy
// (From CSE 190 M, Marty Stepp)

// ID numbers to fetch if 'yes' or 'no' are clicked.
var yesId;
var noId;

// When the page is ready, attach click handlers to #yes and #no buttons, and
// fetch the first question.
$(document).ready(function() {
   // Attach click handlers.
   $('#yes').click(yesClick);
   $('#no').click(noClick);
   
   // Fetch the first question, nodeid = 1.
   fetchNode(1);
});

// Fetch the node with the given ID.
function fetchNode(id) {
   $.ajax('/lectures/ajax-with-xml/animalgame.php', {
      data: { "nodeid": id },
      success: injectNode,
      error: ajaxError
   });
}

// Inject the question/answer node into the page, and remember the next yes/no
// ID for when #yes or #no are clicked.
function injectNode(xmldoc) {
   // Get the <question> node, if any, from the XML returned.
   var questionNode = xmldoc.getElementsByTagName('question')[0];
   
   // Check to see whether there was a <question> element present.
   if (questionNode) {
      // This is a question - remember the yes/no IDs and inject the question
      // into the page.
      $('#questionparagraph').text(questionNode.firstChild.nodeValue);
      // remember the 'yes' id
      yesId = xmldoc.getElementsByTagName('yes')[0].getAttribute('nodeid');
      // remember the 'no' id
      noId = xmldoc.getElementsByTagName('no')[0].getAttribute('nodeid');
   } else {
      // This is an answer - guess the animal, and clear the yes/no IDs to
      // indicate there are no further questions to fetch.
      var answerNode = xmldoc.getElementsByTagName('answer')[0];
      $('#questionparagraph').text("Is your animal: " + answerNode.firstChild.nodeValue + "?");
      yesId = noId = null;
   }
}

// If there's a yesId to fetch, fetch it; otherwise, display a "won" message.
function yesClick() {
   if (yesId) {
      fetchNode(yesId);
   } else {
      $('#questionparagraph').text("Yay I won!");
   }
}

// If there's a noId to fetch, fetch it; otherwise, display a "lost" message.
function noClick() {
   if (noId) {
      fetchNode(noId);
   } else {
      $('#questionparagraph').text("Boo I lost :(");
   }
}

// Alert a useful debugging message based on information provided by jQuery.
// (Provided ajaxError function from lecture slides.)
function ajaxError(jqxhr, type, error) {
   var msg = "An Ajax error occurred!\n\n";
   if (type == 'error') {
      if (jqxhr.readyState == 0) {
         // Request was never made - security block?
         msg += "Looks like the browser security-blocked the request.";
      } else {
         // Probably an HTTP error.
         msg += 'Error code: ' + jqxhr.status + "\n" + 
                   'Error text: ' + error + "\n" + 
                   'Full content of response: \n\n' + jqxhr.responseText;
      }
   } else {
      msg += 'Error type: ' + type;
      if (error != "") {
         msg += "\nError text: " + error;
      }
   }
   alert(msg);
}