Jump to content


Photo

Issues with my first Ajax script


  • Please log in to reply
12 replies to this topic

#1 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 17 September 2006 - 06:13 AM

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
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;
		}
	}
}
       

here is how I call the script later in the html

<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)" />

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

Thanks,
  Tom

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#2 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 17 September 2006 - 02:08 PM

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

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

Info: PHP Manual


#3 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 17 September 2006 - 07:25 PM

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

the test.js
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;
    }
}


And here is the test.html

<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()" />


Any suggestions as to where I am going wrong??

Thanks,
Tom

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#4 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 18 September 2006 - 04:01 AM

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

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#5 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 18 September 2006 - 01:34 PM

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.

Info: PHP Manual


#6 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 18 September 2006 - 01:36 PM

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

Info: PHP Manual


#7 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 18 September 2006 - 10:51 PM

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 http://www.thomashos...s.net/test.html

Here is the contents of my test.php

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

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

Thank you for your help.

Thanks,
Tom

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#8 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 18 September 2006 - 11:01 PM

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.

<?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);
?>

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

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#9 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 18 September 2006 - 11:18 PM

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.

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

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.

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#10 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 19 September 2006 - 01:04 AM

Lose the second +.

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

should be

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

Info: PHP Manual


#11 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 19 September 2006 - 01:31 AM

http://www.whproduct...freaks/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
<!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>

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

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

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.

Info: PHP Manual


#12 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 19 September 2006 - 01:54 AM

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....Posted Image
Tom

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#13 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 19 September 2006 - 03:41 AM

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

Info: PHP Manual





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users