Issues with my first Ajax script

[tomfmason]

Bare with me here. Up till now I have only focused my attention on php. I have never tried any ajax and I am lost. This does nothing. Can anyone see what I am doing wrong?
here is the script
[code]
function createRequestObject() {
    var req;

if(window.XMLHttpRequest) {
  req = new XMLHttpRequest();
}else if(window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  alert('There was an error. This page uses Javascript');
}
return req;
}
var http = createRequestObject();

function sendRequest(field) {
    http.abort;
http.open('post', 'test.php');
http.SetRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.send('field='+field);
}

function handleRequest() {
    if (http.readyState == 4 && http.status == 200) {
    var response = http.responseText;
if (response) {
    document.getElementById("test").innerHTML = response;
}
}
}
[/code]        

here is how I call the script later in the html

[code]
<div id="test">Here is some simple text<br /></div>
<input type="text" id="field" name="field"/><br />
<input type="button" value="Submit" onclick="SendRequest(document.getElementById('field').value)" />
[/code]

In the test.php I have tried this.
[code=php:0]
  $field = $_POST['field'];
  if (!$field)
  echo ("the field is empty");
  }else{
  echo ("The field that you entered is $field");
  }
  [/code]

Thanks,
  Tom

[ober]

You're not actually running the "handleRequest" function.

Have a look at one of my scripts:
http://www.whproductions.com/v2/js/whprod.js

[tomfmason]

I looked at your code and made a few changes. These changes have done nothing.

the test.js
[code]
function createRequestObject() {
    var req;

if(window.XMLHttpRequest) {
  req = new XMLHttpRequest();
}else if(window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  alert('There was an error. This page uses Javascript');
}
return req;
}

var http = createRequestObject();

function sendRequest() {
    var field = document.getElementById('field').value;
http.open('post', 'test.php');
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.send('field='+field);
http.onreadystatechange = handleDetails;
}

function handleDetails() {
    if (http.readyState == 4) {
    var response = http.responseText;
document.getElementById('test').innerHtml = response;
    }
}[/code]


And here is the test.html

[code]
<div id="test">Here is some simple text<br /></div>
<input type="text" id="field" name="field"/><br />
<input type="button" value="Submit" onclick="SendRequest()" />
[/code]


Any suggestions as to where I am going wrong??

Thanks,
Tom

[tomfmason]

This should be working. I have read almost every tutorial that I can find and am unable to figure out exactly what I am doing wrong. I looked at ober's code and there were a couple diffences but that mainly was just that I had forgot to use the handleDetails function. I have no changed it but the results are still the same.

When I view this in Ie 6 I get no results back from the test.php. The only thing that happens is there is an icon in the lower left had corner of the screen saying that the page is done but with errors. Is there a way that I can see exactly what the errors are?

An suggestions would be great.

Thanks,
Tom

[ober]

In IE6, you can double click on the little yellow exclaimation point thing in the corner.  It will bring up the error message, but I warn you IE6 does a horrible job of telling you what went wrong.  You're better off using Opera or Firefox to debug your javascript.  I'd suggest Opera, because it's very descriptive.

EDIT: if you give me a link, I can test it for you and let you know what I found.

[ober]

OH WAIT... I think I know what the problem is.  You're calling "SendRequest".  Your function is "sendRequest".  It is case-sensative!

[tomfmason]

Ok thank you very much. I got that part figured out. But now I am not getting the results returned from the test.php.

Here is the link [url=http://www.thomashostings.net/test.html]http://www.thomashostings.net/test.html[/url]

Here is the contents of my test.php

[code]
<?php
$field = $_POST['field'];

if (!$field) {
    echo "the field is empty";
}else{
  echo "the field  is $field";
} 
?>[/code]

Thank you for your help.

Thanks,
Tom

[tomfmason]

I think that it is not sending the results from the input field to the test.php. I change the test.php to this.. just to see if the results were being sent.

[code]
<?php
$field = $_POST['field'];
$file = "./test.txt";
$fp = fopen($file, "x+b");
if (!$field) {
    $message = "The field was empty";
fwrite($fp, $message, 1024);
    echo $message;
}else{
   message = "the field  is $field";
   fwrite($fp, $message, 1024);
   echo $message;
}
fclose($fp);
?>[/code]

I wonder what I am doing wrong. I will look again at your js and see if I can see a difference on how the results were passed to the script.

Tom

[tomfmason]

I added a + after the field like this. http.send('field='+field+); and now I am getting an error message that says object unexpected on line 42. This is line 42.

[code]
<input type="button" value="Submit" onclick="sendRequest()" />
[/code]

Am I doing something wrong here. Well, I guess I know that I am doing something wrong, as it is not working yet. I guess I will have to play with it until I get it to work.

[ober]

Lose the second +.

http.send('field='+field+);

should be

http.send('field='+field);

[ober]

http://www.whproductions.com/phpfreaks/test.php

You had a few issues... and trust me, it can be frustrating to get your first script to work, but you have to be absolutely meticulous.

A few issues you had:
1) it's innerHTML, not innerHtml.
2) I don't know if your createObject function was working correctly or not, but I swapped it out for mine.
3) It's always a good idea to use form tags around inputs.

Update code:
test.php
[code]<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<scrREMOVEMEipt language="javascript" type="text/javascript">
function createRequestObject()
{
    if (window.XMLHttpRequest) { // Mozilla, Safari, Opera...
        var xmlhttp = new XMLHttpRequest();
        if (xmlhttp.overrideMimeType)
xmlhttp.overrideMimeType('text/xml');
    }
else if (window.ActiveXObject)
{ // IE
        try {
            var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    if (!xmlhttp) {
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }
return xmlhttp;
}

var http = createRequestObject();
function sendRequest() {

    var field = document.getElementById('field').value;
http.open('post', 'test2.php');
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.send('field='+field);
http.onreadystatechange = handleDetails;
}

function handleDetails() {
    if (http.readyState == 4) {
    var response = http.responseText;
document.getElementById('test').innerHTML = response;
}
}
</scREMOVEMEript>
</head>

<body>

<div id="test">This is a test<br /></div>
<form action="">
<input type="text" id="field" name="field"/><br />
<input type="button" value="Submit" onclick="sendRequest();" />
</form>
</body>
</html>
[/code]

test2.php
[code]<?php
$field = $_POST['field'];

if (trim($field) == '') {
    echo "the field is empty";
}else{
  echo "the field  is $field";
} 
?>[/code]

The IPS won't let me post with the script tags in there, so obviously you need to remove the words "REMOVEME" from that part of the code.

[tomfmason]

Thank you very much ober. I did not know that java script is not as forgiving as php. I know that now and will try to pay attention to detail.

Thanks again....[img]http://www.thomashostings.net/images/smiles.gif[/img]
Tom

[ober]

No problem... now go do something more complicated so you can feel the power of AJAX!