PDA

View Full Version : Trying to generate a second AJAX reponse based on first selection



itp
07-30-2006, 12:50 AM
I have got basic AJAX routines working from Basic Ajax Routine page.
http://www.dynamicdrive.com/dynamicindex17/ajaxroutine.htm

This stuff is a bit tricky at first, but I am starting to get the hang of it...

Now I am trying to generate a second AJAX reponse based on first selection. for example: Select Continent-> Select Country ->Select State.

However I am having trouble getting browser to respond to onChange event generated by Ajax response.

Am I hitting some limitation of Ajax? Can anyone provide code or some tips here?

Forgive me if my question is not very clear, however this example may make it more clear.

ref: http://tinyurl.com/h3rdh


code for AJAX Response 1
------------------------
Content-type: text/html

What Country are you from?

</td><td>
<AS400>CountrySection1
<SELECT NAME="SelectCountryName"
onChange="var poststr=createpoststring2();
ajaxpack.postAjaxRequest('/mycgilibp/ajax12.pgm',
poststr, processGetPost2, 'txt');
return false">


<AS400>CountrySection2
<option value="/%CountryName%/" >/%CountryName%/ </option>

<AS400>CountrySection3
</select>


code for AJAX Response 2
------------------------
Content-type: text/html

</td><td>
<AS400>ProvSection1

What State/Province are you from?

<SELECT NAME="SelectProvName" >

<AS400>ProvSection2
<option value="/%ProvName%/" >/%ProvName%/ </option>

<AS400>ProvSection3
</select>

jscheuer1
07-30-2006, 03:40 AM
I've dabbled a bit with AJAX (tweaking some of the AJAX based scripts here at DD) but haven't messed with the Basic Ajax Routine (get & post) page yet. I still have something of value to contribute to your problem though. First off, depending upon how you want to deploy this and how mission critical it is, you should probably go for something simpler in the javascript realm like (chained selects):

http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm

Or, you should go for something completely server side. The advantages to going with javascript alone are that with client side scripting, the response time is usually much faster than either AJAX (which is a hybrid of server side and client side scripting) or server side scripting alone. However, if this is a mission critical operation where all users must be able to use it, javascript is no good because only javascript enabled browsers support it. AJAX (being a hybrid) also has this limitation while also being slower than pure javascript. Still, if either security and/or accessibility are crucial, you must go 100% server side.

itp
07-30-2006, 03:53 PM
Thanks for your quick reply!

The Chained select is great for finite groups of data like cars or counties.
However under the covers you have to map and send all the relationships to the client up front. Example:

addOption("Ford-SUVs/Van", "Select a model", "");
addOption("Ford-SUVs/Van", "Escape", "Escape");
addOption("Ford-SUVs/Van", "Explorer", "Explorer");
addOption("Ford-SUVs/Van", "Expedition", "Expedition");
addOption("Ford-SUVs/Van", "Excursion", "Excursion");
addOption("Ford-SUVs/Van", "Windstar", "Windstar");
addOption("Ford-SUVs/Van", "Econoline", "Econoline");


This will does not scale very well. That is why I was looking at a Ajax solution, where data can be dynamically selected from a large database.

One application for this would be order entry for configured products like Garage Doors, Windows or Blinds, where, depending on the selections made, up to 25 questions may be asked (Model, Style(based on model), Colour (based on model/style), Height(Within limits of model/style), Width (Within limits of model/style, where apllicable), Valance(where apllicable), Valence Type (where valence is selected), Valence colour (where valence is selected) Mechanism type (Within limits of model/style, where apllicable), Wand or Chord, Right or Left Placement (Within limits of model/style, where apllicable), Right/Left/Center Open (where choice exists), Lined (where choice exists) Weatherproofing (where choice exists), child safety package(where choice exists) and so on.

A server side application would be very slow with many user submits. I will assume that my users have javascript, or offer them a server-side solution if they don't.

Let us know if you come across any examples of "chained ajax selects".

itp

jscheuer1
07-30-2006, 06:58 PM
Well, there are none that I know of but, your idea is a good one. Basically what you are saying is that you want to combine AJAX generated content with chained selects with a fall back to server side only methods where javascript is unavailable.

For ordering on a secure site, some type of database check would have to be applied to the javascript results for security purposes.

I'm not your guy for server side solutions though. However, combining javascript with AJAX generated content isn't all that hard. The generated content needs to be polled[1] to make sure it has been parsed by the browser, then the script can be run.

You might want to see this thread:

http://www.dynamicdrive.com/forums/showthread.php?t=11098

to see an example of a poll and how this was worked out to enable the lightbox script to work with AJAX generated content.

The basic idea is that whatever is normally run by a script onload for a page, can be run when the poll finds that the added content has been parsed.



[1]Polling is only required for certain type scripts. Chained selects is one of these as it does run onload to configure the content.

itp
10-01-2006, 05:19 PM
re: http://www.dynamicdrive.com/dynamici...jaxroutine.htm



This stuff is a bit tricky at first, but I am starting to get the hang of it...

Now I am trying to generate a second AJAX reponse based on first selection. for example: Select Continent-> Select Country ->Select State.


I have come back to this problem after a few months break.

I have got the issue resolved for IE, but I am still having trouble with Firefox (1.5.0.7). Firefox does seem to respond to the second AJAX call embedded in the result of the first AJAX call. I am not sure if it is a syntax problem or compatibility issue with Mozilla/Firefox. Example & Code at link below.

http://tinyurl.com/n4pp2

I added some alert()s, so you can see what the AJAX reposnses are.

Let me know if anyone has run into this.

itp

jscheuer1
10-02-2006, 01:03 AM
Well, you will probably want to have a look at this:

http://www.dynamicdrive.com/forums/showthread.php?t=13003