I have a table that has city, state and postal code. I want to auto-fill the city and state when a postal code is entered. The city and postal code are simple text fields, but the state is a drop-down list with abbreviations as the value, and the full state name as the option text. I assume with Ajax.Updater I could just return the HTML for both the city and state fields -- including the entire option list. But, are there any tools available that will update the option list (change "selected") in place? That is, have the ajax request only return the state and city code, and update selected item? Thanks, -- Bill Moseley moseley-kv6DSSSScSo@public.gmane.org
Bill Moseley wrote:> I have a table that has city, state and postal code. I want to > auto-fill the city and state when a postal code is entered. > > The city and postal code are simple text fields, but the state is a > drop-down list with abbreviations as the value, and the full state > name as the option text. > > I assume with Ajax.Updater I could just return the HTML for both the > city and state fields -- including the entire option list.If you use Ajax.Updater, then the result would need to be in (X)HTML like you said.> But, are there any tools available that will update the option list > (change "selected") in place? That is, have the ajax request only > return the state and city code, and update selected item?You could instead use Ajax.Request which would receive an XML doc which would contain the values you need. Then you can do something like this: $(''id_of_city_field'').value = city; $(''id_of_state_dropdown'').value = state; -- Michael Peters Developer Plus Three, LP
On Wed, Jan 18, 2006 at 09:43:45AM -0500, Michael Peters wrote:> You could instead use Ajax.Request which would receive an XML doc which would > contain the values you need. Then you can do something like this: > > $(''id_of_city_field'').value = city; > $(''id_of_state_dropdown'').value = state;But does that make that option selected? Wouldn''t I need to walk the options array and find the matching item and then set the selected option? $(''id_of_select'').selectedIndex = matching_index; -- Bill Moseley moseley-kv6DSSSScSo@public.gmane.org
Bill Moseley wrote:> On Wed, Jan 18, 2006 at 09:43:45AM -0500, Michael Peters wrote: > >>You could instead use Ajax.Request which would receive an XML doc which would >>contain the values you need. Then you can do something like this: >> >> $(''id_of_city_field'').value = city; >> $(''id_of_state_dropdown'').value = state; > > > But does that make that option selected? > > Wouldn''t I need to walk the options array and find the matching item > and then set the selected option? > > $(''id_of_select'').selectedIndex = matching_index;You shouldn''t. By changing the value of a <select> input, it changes what is selected. Does it not work for you? -- Michael Peters Developer Plus Three, LP
> You shouldn''t. By changing the value of a <select> input, it changeswhat> is > selected. Does it not work for you? >Since when? This hasn''t worked in any browser I''ve ever tried, but maybe something has changed since I tried it. It would be nice to add a Form.Element.setValue function to prototype that will just select the matching option if it''s a select box, but as of yet, I didn''t see one in there. You need something like: var input = $(''id''); for (var i=0; i<input.options.length; i++) { if (input.options[i].value == yourValue) { input.options[i].selected = true; break; } } Greg
Gregory Hill wrote:>>You shouldn''t. By changing the value of a <select> input, it changes > > what > >>is >>selected. Does it not work for you? >> > > > Since when? This hasn''t worked in any browser I''ve ever tried, but > maybe something has changed since I tried it.this simple test HTML/JS works fine for me in Firefox 1.0.7 and I''m pretty sure it works with IE (but I don''t have one handy to test with). <html> <form id="my_form"> <select id="stuff"> <option value="">--</option> <option value="foo">Foo</option> <option value="bar">Bar</option> </select> <input type="button" onClick="set_stuff(''foo'')" value="Foo"> <input type="button" onClick="set_stuff(''bar'')" value="Bar"> </form> <script type="text/javascript"> function set_stuff(my_value) { document.forms[''my_form''].elements[''stuff''].value = my_value; } </script> </html> -- Michael Peters Developer Plus Three, LP
On Wed, Jan 18, 2006 at 11:28:55AM -0500, Michael Peters wrote:> this simple test HTML/JS works fine for me in Firefox 1.0.7 and I''m pretty sure > it works with IE (but I don''t have one handy to test with).Finally got back to this -- yes, works great. Thank you. Still have a few questions: I''m returning JSON in my Ajax.Request. should I return content type text/javascript; charset=utf-8? I ask because for Ajax.Updater where I''m passing back a chunk of html I''m sending text/html content type. The JSON I''m returning looks like: {"city":"Washington","state":"DC"} Which I eval in my onComplete code. From the docs it seems that prototype could eval for me, but I wasn''t clear how from the docs. Are there docs somewhere that explains how to deal with errors? When first debugging I noticed that my little "busy" spinner didn''t stop when and error happened server side. Another likely very basic javascript question: How do I pass data from the function that''s calling Ajax.Request to the onComplete function? -- Bill Moseley moseley-kv6DSSSScSo@public.gmane.org