Simple ajax script to display a book's name

Question

I started learning Ajax and I did this simple HTML page that displays a user input, when he types the name of a book (stored in an array in the php file), using ajax, the user can see below the input the results while he types, this is the part I couldn't manage to do, Here's the code :

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="bookstore.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body onload="process()">
  <h1>
    Hadhemi's BookStore !
  </h1>
  Enter the book you want to order
  <input type="text" id="userInput">
  <div id="underInput"> </div>

</body>
</html>

And this is the JS file

// 3 functions : create an object, communicate and response
var xmlHttp=createXmlHttpRequestObject();

function createXmlHttpRequestObject() 
{
    var xmlHttp; 

    if(window.ActiveXObject)
    {
        try 
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //check for IE
        }
        catch (e)
        {
            xmlHttp = false;
        } 
    }
    else 
    {
        try 
        {
            xmlHttp = new XMLHttpRequest(); // ! IE
        }
        catch (e)
        {
            xmlHttp = false;
        }
    }

    if (!xmlHttp) 
        alert("Can't Create that object");
    else
        return xmlHttp;
}

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

function handleServerResponse() 
{
    //sends back an xml file

    if (xmlHttp.readyState==4) 
    {
        if(xmlHttp.status==200) 
        {
            xmlResponse = xmlHttp.responseXML;
            xmlDocumentElement=xmlResponse.documentElement;
            message = xmlDocumentElement.firstChild.data; 
            document.getElementById("underInput").innerHTML= message;
            setTimeout('process()',1000); 
        }

        else
        {
            alert("OOps! Something went wrong!");
        }
    }
}

And this is the PHP file :

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

echo'<response>';

$book = $_GET['book'];
$bookArray = array('Book1','Book2','Book3');
if(in_array($book, $bookArray))
    echo 'We do have'.$book.'!';
elseif ($book='') 
    echo 'Enter a book name idiot!';
else
    echo 'We dont have'.$book.'!';

echo'</response>';

?>

I can't manage to display what the JS file is supposed to do, anyone knows how to fix it?

EDIT: I placed all the files in the www folder under Wamp.

Just a piece of advice , If your still in the learning process at the moment, It is better to use jquery. There is a jquery ajax which is much easier to use than this one. — Hope
– Hope, Commented Sep 2, 2015 at 1:36
Yes I'm still in the learning process and thank you for your advice I will check jQuery. — Hadh
– Hadh, Commented Sep 2, 2015 at 1:39
@Fred-ii- I fixed that and still same problem, it's not displaying anything but the html. — Hadh
– Hadh, Commented Sep 2, 2015 at 1:42
keep in mind that Book1 and book1 are not the same in an array etc.. Update your question with the correct syntax you're using for the elseif in order to avoid further confusion. As for "not displaying anything but the html" - are you sure PHP is running and installed? You on a local machine or hosted? — Funk Forty Niner
– Funk Forty Niner, Commented Sep 2, 2015 at 1:46

Community · Accepted Answer · 2017-05-23 11:44:52Z

There are a few things wrong in what you posted.

Firstly, you have a typo in:

echo '<?xml version="1.0" enconding="UTF-8" standalone="yes" ?>';
                              ^ the "n"

Which should read as encoding.

Having errors set to be displayed on your server would have thrown you the following:

XML Parsing Error: XML declaration not well-formed Location: http://www.example.com/book.php?book.php?book= Line Number 1, Column 21:

Plus, do keep in mind that, and as I stated in comments that Book1 and book1 are not treated the same, therefore the array keys are considered as case-sensitive.

Consult the following answer on Stack:

https://stackoverflow.com/a/5404753/

You're also doing an assignment for while using a single equal sign:

elseif ($book='')
             ^

rather than a comparison, which should contain an additional equal sign:

elseif ($book=='')
             ^^

References:

Plus, make sure that PHP is indeed installed, running and properly configured.

Collectives™ on Stack Overflow

Simple ajax script to display a book's name

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related