Welcome to WebmasterWorld Guest from 54.211.136.250

Forum Moderators: open

Message Too Old, No Replies

Newbie problems: AJAX function problems

   
8:57 am on Sep 13, 2006 (gmt 0)

5+ Year Member



Hello everyone:

I am having a really annoying problem with javascript and calling a function. I have asked many people but no one has been able to help me, but I still believe there is a simple solution somewhere.

This is how it works. I have a select box on a page. When onChange event is executed a function is called which sends a http request. The code returned is echo'd to produce another select box with more options.

This all works perfectly. The problem begins when I want to have two select box's output but with different names. So they have the same options, the same text, just different names. Simple as that. However I can't get it to work. Code as follows:

/************************* CODE ***********************/

<?php
include_once ("include/stdlib.php");
include ("include/stdcfg.php");
?>
<html>
<head> <title> test page </title>
<script language="javascript" type="text/javascript">

function createRequestObject() {

var req;

if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// There is an error creating the object,
// just as an old browser is being used.
alert('Problem creating the XMLHttpRequest object');
}

return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();

function sendRequest() {
// Open PHP script for requests
var mainCategory = document.getElementById("main_category").value;
http.open('get', 'getSubCategories.php?name=sub_category&param='+mainCategory);
http.onreadystatechange = handleResponse;
http.send(null);

sendRequest;

}

function sendRequest2() {
// Open PHP script for requests
var mainCategory = document.getElementById("main_category").value;
http.open('get', 'getSubCategories.php?name=second_sub_category&param='+mainCategory);
http.onreadystatechange = handleResponse;
http.send(null);

}

function handleResponse(element) {

if(http.readyState == 4 && http.status == 200){

// Text returned FROM the PHP script
var response = http.responseText;
alert(http.responseText);

if(response) {
// UPDATE ajaxTest content
document.getElementById(element).innerHTML = response;
}

}

}

</script>

</head>

<body>

<?php
echo "<form>";
echo "<select id='main_category' name='main_category' onChange='sendRequest();'>";
$result = runQuery("SELECT * FROM categories WHERE parent_category = ''");

while ($row = mysql_fetch_array($result)) {
$id = $row['id'];
$category = $row['category'];
echo "<option id='$id' value='$id'> $category";
}
echo "</select>";

echo "<div id='sub_category'></div>";

echo "</form>";

?>

</body>
</html>

/************************* END ***********************/

There we are then. I've tried everything that I can think off.

Originally I copied the code to call and create the select boxes, but that didn't work. I then tried giving the function a parameter, so I could call it twice but with a different name given:

<select onChange='sendRequest('box_1'); sendRequest('box_2');'>

That didn't work. I then tried coping and pasting the function sendRequest to sendRequest2, and calling the functions after one another - still doesn't work.

I've been stuck on this for 2 days now, and still no luck. As I said, I'm sure there must be a simple solution.

Simplicity is the key, as I have only just started learning ajax and even js too.

Thanks for all your help,
Gary.

10:41 am on Sep 13, 2006 (gmt 0)

10+ Year Member



I think I tried to do something similiar and failed.

So what I did I passed a variable to one function and did something based on the variable. Like this:

unction sendRequest(stuff) {
if stuff == dothingone {
// Open PHP script for requests
var mainCategory = document.getElementById("main_category").value;
http.open('get', 'getSubCategories.php?name=sub_category&param='+mainCategory);
http.onreadystatechange = handleResponse;
http.send(null);
}
else {
// Open PHP script for requests
var mainCategory = document.getElementById("main_category").value;
http.open('get', 'getSubCategories.php?name=second_sub_category&param='+mainCategory);
http.onreadystatechange = handleResponse;
http.send(null);
}
}

Does that make sense?

1:40 pm on Sep 13, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



@redrabbit, you have a line with

sendRequest;

What happens when you change that into

sendRequest2();

? (I'm asking because I guess you want to call sendRequest2 from your sendRequest method).

Welcome to WebmasterWorld, by the way!