Jump to content

Archived

This topic is now archived and is closed to further replies.

tomfmason

Issues with my first Ajax script

Recommended Posts

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

Share this post


Link to post
Share on other sites
You're not actually running the "handleRequest" function.

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
OH WAIT... I think I know what the problem is.  You're calling "SendRequest".  Your function is "sendRequest".  It is case-sensative!

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Lose the second +.

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

should be

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
No problem... now go do something more complicated so you can feel the power of AJAX!

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.