> I finally got the AJAX working (Scriptacilious was messing up
> something with it) and now, I have another issue..
>
> I get the popup list of employers. I'd like to be able to
> click on the name of one and populate the name, address and
> city fields of the form WITHOUT submitting it.
>
> I thought about using an anchor link, but that will just take
> me to the querry page. I could put in another ajax call, but
> I think that's over designing the solution.
>
> Any thoughts or ideas how I could proceed?
Have your AJAX call return all the employer data: name, address and city.
Then, use one of those fields to populate your SELECT. Finally, add an
onchange event handler to your SELECT so that when an employer is selected,
the corresponding values from that "record" are used to populate the fields.
Without knowing how your AJAX call is returning data, let's just say you
have something like this:
<cfquery name="qEmployers" ...>
SELECT name, address, city FROM employers ORDER BY name
</cfquery>
<script>
var rsEmployers = new Object();
rsEmployers.name = new Array();
rsEmployers.address = new Array();
rsEmployers.city = new Array();
<cfoutput query="qEmployers">
<cfset jsRow = qEmployers.CurrentRow - 1>
rsEmployers.name[jsRow] = '#qEmployers.name#';
rsEmployers.address[jsRow] = '#qEmployers.address#';
rsEmployers.city[jsRow] = '#qEmployers.city#';
</cfoutput>
Of course, you're more likely using something "out of the box" like JSON,
but this makes an example easier to read (I think).
Then, of course, you'll have some JavaScript to populate the SELECT:
<script>
function populateEmployer()
{
var emp = document.forms[0].employer;
for (var i = 0; i < rsEmployers.name.length; i++)
{
emp.options[emp.options.length] = new
Option(rsEmployers.name[i], i);
}
}
</script>
Then, you'll have an event handler called when the SELECT changes:
<select name="employer"
onchange="populateForm(this.options[this.selectedIndex].value);
Finally, you'll have the function to handle the event:
<script>
function populateForm(row)
{
document.forms[0].name.value = rsEmployers.name[row];
document.forms[0].address.value = rsEmployers.address[row];
document.forms[0].city.value = rsEmployers.city[row];
}
</script>
Again, of course, your AJAX library probably will abstract most of this away
from you (and do it with cleaner code), but this should give you a clue
where to look to get what you need.
Dave Watts, CTO, Fig Leaf Software
http://www.figleaf.com/
Fig Leaf Training: Adobe/Google/Paperthin Certified Partners
http://training.figleaf.com/
WebManiacs 2008: the ultimate conference for CF/Flex/AIR developers!
http://www.webmaniacsconference.com/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:304369
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
