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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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

AJAX is related to DHTML and Javascript. It goes in that forum. I moved this thread now.

Hi,
I've been doing lots of work with 'AJAX' at work. But my team didn't like that acronym, so we made up our own. Jasc.

Java API for Server Communications.

Because really 'AJAX' is just a heap of Web technologies that have been around for ages. And the acronym AJAX doesn't even cover everything that the technologies do. For starters, Javascript isn't technically required for these technologies (though you'd probably have difficulty in non-IE browsers without it). Secondly it's not about XML, its about HTTP (however Mozilla uses an XML object to get a handle to a data stream). Thirdly, it doesn't have to be asyncronous, you can wait for the response.

Then we could incorporate the XSLT tools that are available and the obvious benefits of including DHTML.. and manipulating the DOM.

Anyhow, I'm having a few beers.... and don't feel like assembling your code to see what you are doing. Perhaps it would be more interesting if you explained what your question is?

Cheers!

BTW. We made up our silly acronym for the sport of it... Why does everything need silly acronyms to be sold to clients?

AJAX is just easier to say than whatever you have to offer Anyways, get used to it - the term AJAX won't be going anywhere anytime soon

hi,

Thanks for the reply and concern.

It was nice to hear that u had been working using this technology that i really wud like to incorporate.

Actually, the need came when i had to generate the reports for a company selected based on the equipment type.

suppose say a company has 4 eqpmnt types like motor, pump, blower and roller, i need a drop down menu that should be showing on chnage a list of equipment numbers.these equipment numbers are valid only with that company site and is used by employees there.

Now if the company has another site there this number wud be regferring another equipment.

So, thought of making a dropdown window options for equipment numbers for the equipmrnt type selected from a drop down form wlement. Is that possible. please do help me ...

Thanking you a lot for your concern and finding time for me ...

regards
Harish Balakrishnan Marar

It's a pet-peeve of mine, so I could not resist responding. Java and Javascript are not the same thing. They are not even related. They were completely different development paths from 2 completely different companies. The only thing they share in common other than a common C-like structure like a lot of languages do, is the 4 letters "java". Javascript is not a scripting subset of Java. Unlike VBScript, which IS a scripting subset of VB.

alpha_foobar, I assume you meant javascript, because the J in AJAX is for javascript.

hbmarar, as for your application problem, your situation sounds like a standard data-driven, dynamic website coded using server-side development such as PHP, ASP, ASP.NET, JSP, CGI, Cold Fusion. (I'm a PHP fan myself.) I think applying AJAX to the need you've described would be a lot more complicated that coding a standard server-side solution.

Side note: I've read up on AJAX, and I do understand the concept. I've been doing what I think is the exact same functionality using a mixture of Javascript and a hidden IFRAME within the page. I use javascript to submit to a page within the IFRAME, then parse the results of that IFRAME back into the parent document as applicable. I create "live" pages that appear to live update without roundtrips to the server--although of course, there is always a roundtrip required to get new data.

whoops, my bad... I did mean to write Javascript.

However I am Java developer working at a Java IT solutions shop (which is possibly how I made this error - other work on the mind).

But it is worth pointing out that an API for this could be constructed in Java.. which would make it more compatible with Opera. However, our target is IE.. I just make everything Mozilla compatible because I prefer the Venkman debugger to the windows script debugger (which often can't even work out what file you've loaded).

Thanks for pointing out my error

And you are pretty accurate in the use of IFRAME elements. Where content is required to be displayed IFRAME offer a pretty good alternative to many 'AJAX' solutions. Especially in IE, where ActiveX components, Select boxes and IFRAME elements share the same tier of the UI - this means pushing content into lesser DOM elements can create ugly results.

But an IFRAME objects tend to be rather heavy on the client machine. And this one place where the ability to connect to the server and get data can be really usefull... Consider the google suggest tool - it would be really simple to create an IFRAME, submit a query loading the results into the IFRAME and parse the contents of the IFRAME for your data... but say you only want to return the best 5 results based on the text the user has entered.. and you want to update the results each time the user adds a new character (or removes it).. then it would be simpler to just get the request and populate your result set.... and using XSL transform, you could simplify the info that you get sent from the server (recieving XML) and transform it to whatever you wanted. The beauty of doing it this way is that you are using native functions to parse your data (which is likely to be 10x faster than your own javascript functions).

But using IFRAME based solutions have many benefits, firstly - It is likely to be useable in more browsers. Secondly, you can not access data from another URL using Javascript HTTP Request objects... which seems silly to me, since anyone who knows anything about Javascript could just use the very methods you have explained and the user would be none the wiser... but as it is, this causes a security exception in Mozilla... so if you want to access data from other websites, then you have no choice.

Now using AJAX similar technologies is going to make the solution more complicated. But these technologies lift the web application game dramatically.... web applications can be as responsive as PC applications... its just a matter of being intelligent about what data you need to communicate with the user.

hi ,

Thanks for your suggestions and I believe you have given me a new way of viewing the need.

Hope it helps me out.

Wishing you a gr8 time

Harish Balakrishnan Marar

Thank you for the intelligent and clearly written explanation of the technology, alpha_foobar! I have not heard anyone talk about the performance of the technology before. I read 2 articles explaining how people use the technology--and all the hoops you have to jump through--and I just thought to myself, "you could always do this with IFRAMES and Javascript, and IFRAMES are very browser compatible--what's the BIG deal?!" But if using the HTTP Request object is high performance over IFRAMES, then it has some value.

WHEN and IF I get time to play with it, I'll have to benchmark test with the AJAX architecture.