Ajax First Example

+1 Pia Bianca Bonilla · December 26, 2014
Hello everyone. This is my code which i copied from the video tutorial. Why is it the text under the userInput div is not appearing??

index.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title> Food </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <script> type="text/javascript" src="foodstore.jsp" </script>
    </head>
    <body onload="process()">
        <h3> The Chuff Bucket </h3>
        Enter the food you would like to order: 
        <input type="text" id="userInput" onkeyup="process()"/>
        <div id="userInput">
            
        </div>
    </body>
</html>

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' .$food. '!';
echo '</response>';
?>

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 hoss!")
    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("userInput").innerHTML = '<span style="color:blue">' + message + '</span>';
            setTimeout('process()', 1000);
        } else {
            alert ('Something went wrong');
        }
    }
}



Anyone please help me :) Thnkyou



Post a Reply

Replies

Oldest  Newest  Rating
0 ussef matyo · December 26, 2014
Hello,
May be you have to make some modifications:

First:
    change th ID of DIV element to 'result' for example in "index.html"

Second
  document.getElementById("result").innerHTML = '<span style="color:blue">' + message + '</span>';
0 Pia Bianca Bonilla · December 27, 2014
still it doesn't work 
0 Alex . · December 27, 2014
Hey Pia,

setTimeout(process(), 1000);

needs to be

setTimeout('process()', 1000);


document.getElementById("userInput").innerHTML = '<span style="color:blue">' + message + '</span>';

needs to be

document.getElementById("underInput").innerHTML = '<span style="color:blue">' + message + '</span>';
  • 1

PHP

107,321 followers
About

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

Links
Moderators