AJAX Tutorial 11 - Problem with code

+4 Paul Kane · November 20, 2014
Hi All

Massive fan of Bucky and Alex, found you guys on youtube. 

I notice that the <div id="underInput" /> code is not showing in the index.html page for AJAX Tutorial - 11 - Running our Awesome Program!.  I am running XAMPP v 1.7.3, and i run it via localhost. 

Have i missed something with the below code?  I have written down the code that i copied.

Can i get the code for this somewhere on this website? I have looked through the tutorials on youtube and believe i have written the code down exactly. 

Any help would be greatly appreciated, and thank-you in advance. 

Regards
Paul


Code AJAX Tutorial - 11 - Running our Awesome Program!. 


index.html


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="foodstore.js"></script>
</head>
<body onload="process()">
<h3>The Chuff Bucket</h3>
Enter the food you would like to order:
<input type="text" id="userInput" />
<div id="underInput" />
</body>
</html>


foodstore.js


var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject()  {
var xmlHttp;

if(window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = false;

}
} else{
try{
xmlHttp = new XMLHttpRequest();
}catch(e) {
xmlHttp = false;
}
}

if(!xmlHttp)
alert("cant create that object!");
else
return xmlHttp;
}


function process() {
if(xmlHttp.readyState==0 || xmlHttp.readyState==4) {
food = encodeURIComponent(document.getElementById("userInput").value);
xmlHttp.open("GET", "foodstore.php?food=" + food, true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send==(null);
}else{
setTimeout('process()',1000);
}
}


function handleServerResponse() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data;
document.getElementById("underInput").innerHTML = '<span style="color:blue">' + message + '</span>';
setTimeout('process()',1000);
}else{
alert('Something went wrong!');
}
}
}


foodstore.php


<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';

echo '<response>';
$food = $_GET['food'];
$foodArray = array('tuna','bacon','beef','loaf','ham');
if(in_array($food,$foodArray))  
echo 'We do have '.$food.'!';
     elseif ($food=='') 
echo ''Enter a food you idiot';
else 
echo 'Sorry punk we dont sell no '.$food.'!';
echo '</response>';

?>

Post a Reply

Replies

Oldest  Newest  Rating
0 Pia Bianca Bonilla · December 26, 2014
Hello. I have also the same problem but I tired the solution it is still not working. Can anyone here please help me? Thnkyou
0 pritesh patel · December 9, 2014
Hey Paul Kane ,
I was following bucky's videos and after that i was also facing the same issue which you're facing now!
but i've got a solution on my own here:
1) remove ' ' from process() on this line in foodstore.js : setTimeout('process()',1000);
2) set onkeyup="process()" in index.html. like this:  <input type="text" id="userInput" onkeyup="process()" /> as it will search on each keypress event

Hope this will work for you and Let me know if you still face any problem! cheers! 
0 Alex . · December 30, 2014
elseif ($food=='')

should be

elseif ($food=='"')

Go through your code and check everything twice
  • 1

PHP

107,248 followers
About

Server-side, HTML embedded scripting language used to create dynamic Web pages.

Links
Moderators