What do I need to change in order to get this to work using ajax?

**doheja07** · 06-19-2009 12:38 AM

I created a code. When I run the code using php, it is very inneficient. I figured I could significantly improve my UI if I could use ajax. The problem is, I am new to javascript and ajax. I have been following a tutorial to get a idea as to how I should write the code, but for some reason it doesn't work. It does work, however, when it is just php. Could somebody give me an idea as to what I need to change so that the code will work with ajax?

This is upload.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=utf-8" />
<title>Untitled Document</title>
</head>
<?php
require_once("connection.php");
require_once("functions.php");
?>
<script type="text/javascript" src="getcategories.js"></script>

<body>
<form action="upload2.php" method="post">
<select name="categories" onchange="getSubcategories(this.value)">

<?php
get_selectable_categories();
?>
</select>
<select name="subcategories" onchange="getSubsubcategories(this.value)">
</select>
<select name="subsubcategories">
</select>
<input type="submit" name="submit" value="Submit" />
</form>
<?php
mysql_close($connection);
?>

</body>
</html>

This is getCategories.js:

Code:

window.onload = getCategories;

var xhr;

function getCategories() {
	xhr=GetXmlHttpObject();
if (xhr==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url = "categories.php";
url = url+"sid="+Math.random();
xhr.onreadystatechange=stateChanged;
xhr.open("GET",url,true);
xhr.send(null);
}

function getSubcategories(id) {
	xhr=GetXmlHttpObject();
if (xhr==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url = "subcategories.php";
var url = url+"?id="+id;
url = url+"sid="+Math.random();
xhr.onreadystatechange=stateChanged;
xhr.open("GET",url,true);
xhr.send(null);
}

function getSubsubcategories(id) {
	xhr=GetXmlHttpObject();
if (xhr==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url = "subsubcategories.php";
var url = url+"?id="+id;
url = url+"sid="+Math.random();
xhr.onreadystatechange=stateChanged;
xhr.open("GET",url,true);
xhr.send(null);
}

function stateChanged()
{
if (xhr.readyState==4)
{
document.getElementById("categories").innerHTML=xhr.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

This is categories.php:

Code:

<?php require_once("connection.php"); ?>
<?php require_once("functions.php"); ?>
<?php get_selectable_categories(); ?>
<?php mysql_close($connection); ?>

This is subcategories.php:

Code:

<?php require_once("connection.php"); ?>
<?php require_once("functions.php"); ?>
<?php $id = $_GET['id']; ?>
<?php get_selectable_subcategories($id); ?>
<?php mysql_close($connection); ?>

This is subsubcategories.php:

Code:

<?php require_once("connection.php"); ?>
<?php require_once("functions.php"); ?>
<?php $id = $_GET['id']; ?>
<?php get_selectable_subsubcategories($id); ?>
<?php mysql_close($connection); ?>

This is functions.php:

Code:

<?php

function confirm_query($result_set) {
		if (!$result_set) {
			die("Database query failed: " . mysql_error());
		}
	}

function get_all_categories() {
		global $connection;
		$query = "SELECT *
				  FROM categories
				  WHERE visible = 1
				  ORDER BY cat_name ASC";
		$category_set = mysql_query($query, $connection);
		confirm_query($category_set);
		return $category_set;
	}
	
function get_selectable_categories() {	
	$categories = get_all_categories();
	while($category = mysql_fetch_assoc($categories)) {
		echo "<option value=" . $category['id'] . "";
		echo ">" . $category['cat_name']. "</option>";
	}
}

function get_subcategories_for_category($id) {
	global $connection;
	$query = "SELECT *
			  FROM subcategories
			  WHERE cat_id = $id
			  AND visible = 1
			  ORDER BY subcat_name ASC";
	$subcategory_set = mysql_query($query, $connection);
	confirm_query($subcategory_set);
	return $subcategory_set;
}

function get_selectable_subcategories($id) {	
	$subcategories = get_subcategories_for_category($id);
	while($subcategory = mysql_fetch_assoc($subcategories)) {
		echo "<option value=" . $subcategory['id'] . "";
		echo ">" . $subcategory['subcat_name']. "</option>";
	}
}

function get_subsubcategories_for_subcategory($id) {
	global $connection;
	$query = "SELECT *
			  FROM subsubcategories
			  WHERE subcat_id = $id
			  AND visible = 1
			  ORDER BY subsubcat_name ASC";
	$subsubcategory_set = mysql_query($query, $connection);
	confirm_query($subsubcategory_set);
	return $subsubcategory_set;
}

function get_selectable_subsubcategories($id) {	
	$subsubcategories = get_subsubcategories_for_subcategory($id);
	while($subsubcategory = mysql_fetch_assoc($subsubcategories)) {
		echo "<option value=" . $subsubcategory['id'] . "";
		echo ">" . $subsubcategory['subsubcat_name']. "</option>";
	}
}
	
?>

I would really appreciate it if somebody could tell me how to get the ajax version of this working.

**xsonline** · 08-08-2009 07:59 PM

It looks fine by me. Only, in getCategories I see you have done this

Code:

xhr.onreadystatechange=stateChanged;

Try changing it in:

Code:

xhr.onreadystatechange=stateChanged();

Keep me posted

Thread: What do I need to change in order to get this to work using ajax?

LinkBack

Thread Tools

Search Thread

Display

What do I need to change in order to get this to work using ajax?

Re: What do I need to change in order to get this to work using ajax?

Thread Information

Users Browsing this Thread

Similar Threads

Clipboard Game

My friend need help on this problem!

Considering Ajax, Part 1: Cut through the hype

AJAX Evolved

Bookmarks

Bookmarks

Posting Permissions