hi,
I am a new bie to this concept of AJAX....but the demo trial with a select element went fine.
What i tried?
I created a html file and a drop down menu.based on the option the the information is displayed to the right of menu.
What i want is to instead of informatin it should be printing html forms but I am not able to make it work....
Please anybody help me...as I am pasting the demo codes here.....
******************************
*.php file
******************************
<?php
/* You should implement error checking, but for simplicity, we avoid it here */
if($_GET['action'] == 'get_products'){
/* We're here to get the product listing...
You can obviously change this file to include many
different actions based on the request.
*/
switch($_GET['id']){
/* We had the following in our list.
0 Grades
1 Discipline
2 Period
3 Equipments
The integer value on the left is the value
corresponding to the javascript selectedIndex
property.*/
case 0: // Audio Programs
/* Print HTML to fill the product_cage <div>
Any output to the browser will be
retrieved in the XMLHttpRequest object's
responseText property */
$result = $GLOBALS['db']->execQuery("select bottom_grade,top_grade from grades");
$topSelect = "<select name='top_grade'>";
$bottomSelect = "<Select name='bottom_grade'>";
for($h=1;$h<=12;$h++){
$topSelect.="<option value='".$h."'";
$bottomSelect.="<option value='".$h."'";
if(mysql_result($result,0,"top_grade")==$h)
$topSelect.=" selected ";
if(mysql_result($result,0,"bottom_grade")==$h)
$bottomSelect.=" selected ";
$topSelect.=">".$h."</option>";
$bottomSelect.=">".$h."</option>";
}
$topSelect .= "</select>";
$bottomSelect .= "</select>";
echo '
<form action="index.php?a=setup&g=1" method="post">
<table align="center">
<tr>
<td align="right"> </td><td><strong>Enter grade span:</strong></td>
</tr>
<tr>
<td align="right">lowest grade:</td><td>'.$bottomSelect.'</td>
</tr>
<tr>
<td align="right">highest grade:</td><td>'.$topSelect.'</td>
</tr>
<tr>
<td align="right"> </td><td><input type="submit" name="submit" value="submit"></td>
</tr>
</table>
</form>
</td>';
break;
case 1: //Games
echo '
<td><img src="icon_singlepx.gif" width="10" height="1" alt=""></td>
<td valign="top">
<form action="index.php?a=setup&d=1" method="post">
<table align="center">
<tr>
<td align="right"> </td><td><strong>Add Discipline Area:</strong></td>
</tr>
<tr>
<td align="right">Name:</td><td><input type="text" name="discipline"></td>
</tr>
<tr>
<td align="right"> </td><td><input type="submit" name="submit" value="submit"></td>
</tr>
</table>
</form>
</td>';
break;
case 2: //Internet
echo '
<td><img src="icon_singlepx.gif" width="10" height="1" alt=""></td>
<td valign="top">
<form action="index.php?a=setup" method="post">
<table align="center">
<tr>
<td align="right"> </td><td><strong>Add period:</strong></td>
</tr>
<tr>
<td align="right">name:</td><td><input type="text" name="name"></td>
</tr>');
$page->datebox(0,0,0,"bd","bm","by",$datass['year'],($datass['year']+8),1,"begins on:");
$page->datebox(0,0,0,"ed","em","ey",$datass['year'],($datass['year']+8),1,"ends on:");
echo('
<tr>
<td align="right"> </td><td><input type="submit" name="submit" value="submit"></td>
</tr>
</table>
</form>
</td>';
break;
case 3:
echo ' hi
');
break;
default:
echo '<b>You didn't select an item from above!</b>';
break;
}
}
?>
********************************
html file below
************
<div id="product_categories">
<!--category selection Box-->
<form name="form_category_select">
<select name="select_category_select" onChange="getProducts();">
<option> Grade </option>
<option> Discipline </option>
<option> Period </option>
<option> Equipments </option>
</select>
</form>
</div>
<div id="product_cage">
<!-- This is where we will be displaying the products once they are loaded-->
Pl ease select from right
<table align="center"><tr>
<td valign="top">
</div>
***************************************
js file
***************************************
/* The following function creates an XMLHttpRequest object... */
function createRequestObject(){
var request_o; //declare the variable to hold the object.
var browser = navigator.appName; //find the browser name
if(browser == "Microsoft Internet Explorer"){
/* Create the object using MSIE's method */
request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
/* Create the object using other browser's method */
request_o = new XMLHttpRequest();
}
return request_o; //return the object
}
/* You can get more specific with version information by using
parseInt(navigator.appVersion)
Which will extract an integer value containing the version
of the browser being used.
*/
/* The variable http will hold our new XMLHttpRequest object. */
var http = createRequestObject();
/* Function called to get the product categories list */
function getProducts(){
/* Create the request. The first argument to the open function is the method (POST/GET),
and the second argument is the url...
document contains references to all items on the page
We can reference document.form_category_select.select_category_select and we will
be referencing the dropdown list. The selectedIndex property will give us the
index of the selected item.
*/
http.open('get', 'internal_request.php?action=get_products&id='
+ document.form_category_select.select_category_select.selectedIndex);
/* Define a function to call once a response has been received. This will be our
handleProductCategories function that we define below. */
http.onreadystatechange = handleProducts;
/* Send the data. We use something other than null when we are sending using the POST
method. */
http.send(null);
}
/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleProducts(){
/* Make sure that the transaction has finished. The XMLHttpRequest object
has a property called readyState with several states:
0: Uninitialized
1: Loading
2: Loaded
3: Interactive
4: Finished */
if(http.readyState == 4){ //Finished loading the response
/* We have got the response from the server-side script,
let's see just what it was. using the responseText property of
the XMLHttpRequest object. */
var response = http.responseXML;
/* And now we want to change the product_categories <div> content.
we do this using an ability to get/change the content of a page element
that we can find: innerHTML. */
document.getElementById('product_cage').innerHTML = response;
}
********************************************
please someody tell me more about this .
thanking in advance
Harish Balakrishnana Marar