Jump to content

Issues with my first Ajax script


tomfmason

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.