Hello everyone,
This is related to my post a few days ago regarding multi select
lists. I''ve rewritten the code and now can''t seem to get the
Ajax.Updater in getModels() to "execute", and the element never gets
populated.
I know it''s something obvious and hope someone could point it out to
me.
Thanks for any help.
Here''s my code:
<script src="/js/prototype.js"
type="text/javascript"></script>
<script type="text/javascript">
Event.observe(window, ''load'', init, false);
function init() {
//$(''model'').disabled = true;
//$(''year'').disabled = true;
var the_make = ''ford'';
var the_model = ''thunderbird'';
var the_year = ''1964'';
Event.observe(''make'', ''change'',
getModels, false);
Event.observe(''model'', ''change'',
getYears, false);
setMake(the_make);
getModels();
/*
if (the_model != null) {
getModels();
setModel(the_model);
}
if (the_year != null) {
getYears();
setYear(the_year);
}
*/
}
function getModels() {
var url = ''/util/model_select_response'';
var pars =
''make=''+escape($F(''make''))+'',onComplete:setModel'';
var target = ''model'';
var modelAjax = new Ajax.Updater(target, url, {method:
''get'',
parameters: pars});
var model = $(''model'');
alert(model.length);//This returns 0
}
function getYears() {
var url = ''/util/year_select_response'';
var pars = ''id=''+escape($F(''model''));
var target = ''year'';
var yearAjax = new Ajax.Updater(target, url, {method:
''get'',
parameters: pars});
}
function setMake(the_make) {
var make = $(''make'');
var makere = new RegExp(the_make);
// Set the make
for (var i=make.options.length-1; i>=0; i--) {
var m = make.options[i].value;
if ( makere.test(m) ) {
make.selectedIndex = i;
}
}
}
function setModel(the_model) {
alert("in set model");
var model = $(''model'');
alert(model.length);
var modelre = new RegExp(the_model);
// Set the model
for (var i=model.options.length-1; i>=0; i--) {
var m = model.options[i].value;
if ( modelre.test(m) ) {
alert(m);
//model.selectedIndex = i;
model.options[i].selected = true;
}
}
}
function setYear(the_year) {
var year = $(''year'');
var yearre = new RegExp(the_year);
// Set the year
for (var i=year.options.length-1; i>=0; i--) {
var m = year.options[i].value;
if ( yearre.test(m) ) {
year.selectedIndex = i;
}
}
}
</script>
<form id="myform" action="#">
<table width="100%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="102" rowspan="3" style="border-right:
1px solid #cccccc
"> </td>
<select name="make" id="make">
<option value="abarth">Abarth</option>
<option
value="abbott_detroit">Abbott-Detroit</option>
<option value="abc">ABC</option>
<option value="abingdon">Abingdon</option>
<option value="ford">Ford</option>
<option value="ac">AC</option>
<option value="ace">ACE</option>
<option value="acura">Acura</option>
<option value="adler">Adler</option>
</select>
<select name="model" id="model">
</select>
<select name="year" id="year">
</select>
</td>
</tr>
</table>
</form>
<br />
Any help is greatly appreciated!
Kevin
--
Kevin Old
kevinold-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
> */ > } > > function getModels() { > var url = ''/util/model_select_response''; > var pars = ''make=''+escape($F(''make''))+'',onComplete:setModel'';The above line looks wrong - the onComplete shouldn''t be there and should be a separate element in the options hash passed to Ajax.Updater. E.g: var yearAjax = new Ajax.Updater(target, url, {method: ''get'', parameters: pars, onComplete: setModel});> var yearAjax = new Ajax.Updater(target, url, {method: ''get'', > parameters: pars});> var target = ''model''; > var modelAjax = new Ajax.Updater(target, url, {method: ''get'', > parameters: pars}); > var model = $(''model''); > alert(model.length);//This returns 0 > } > > function getYears() { > var url = ''/util/year_select_response''; > var pars = ''id=''+escape($F(''model'')); > var target = ''year''; > var yearAjax = new Ajax.Updater(target, url, {method: ''get'', > parameters: pars}); > } > > function setMake(the_make) { > var make = $(''make''); > var makere = new RegExp(the_make); > > // Set the make > for (var i=make.options.length-1; i>=0; i--) { > var m = make.options[i].value; > if ( makere.test(m) ) { > make.selectedIndex = i; > } > } > } > > function setModel(the_model) { > alert("in set model"); > var model = $(''model''); > alert(model.length); > var modelre = new RegExp(the_model); > // Set the model > for (var i=model.options.length-1; i>=0; i--) { > var m = model.options[i].value; > if ( modelre.test(m) ) { > alert(m); > //model.selectedIndex = i; > model.options[i].selected = true; > } > } > } > > function setYear(the_year) { > var year = $(''year''); > var yearre = new RegExp(the_year); > > // Set the year > for (var i=year.options.length-1; i>=0; i--) { > var m = year.options[i].value; > if ( yearre.test(m) ) { > year.selectedIndex = i; > } > } > } > </script> > > > <form id="myform" action="#"> > <table width="100%" border="0" cellpadding="0" cellspacing="0"> > <tr> > <td width="102" rowspan="3" style="border-right: 1px solid #cccccc > "> </td> > <select name="make" id="make"> > <option value="abarth">Abarth</option> > <option value="abbott_detroit">Abbott-Detroit</option> > <option value="abc">ABC</option> > <option value="abingdon">Abingdon</option> > <option value="ford">Ford</option> > <option value="ac">AC</option> > <option value="ace">ACE</option> > <option value="acura">Acura</option> > <option value="adler">Adler</option> > </select> > <select name="model" id="model"> > </select> > <select name="year" id="year"> > </select> > </td> > </tr> > </table> > </form> > <br /> > > Any help is greatly appreciated! > > Kevin > -- > Kevin Old > kevinold-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Hi Tom, On 2/9/06, Tom Riley <tom-PBmQmKy+xGfg53LLcykzWA@public.gmane.org> wrote:> The above line looks wrong - the onComplete shouldn''t be there and > should be a separate element in the options hash passed to > Ajax.Updater. E.g: > > var yearAjax = new Ajax.Updater(target, url, {method: ''get'', > parameters: pars, onComplete: setModel});Fixed. Now I''m getting content back in Firefox only and not IE6 when calling with Ajax.Updater. When I call with Ajax.Request I get content back in both Firefox and IE6. I''m verifying the content by calling an onComplete to this function: function showResponse(originalRequest) { //put returned XML in the textarea $(''result'').value = originalRequest.responseText; } I''m using Prototype 1.4.0 final. Any ideas? Thanks for your help, Kevin -- Kevin Old kevinold-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
On 2/9/06, Kevin Old <kevinold-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi Tom, > > On 2/9/06, Tom Riley <tom-PBmQmKy+xGfg53LLcykzWA@public.gmane.org> wrote: > > The above line looks wrong - the onComplete shouldn''t be there and > > should be a separate element in the options hash passed to > > Ajax.Updater. E.g: > > > > var yearAjax = new Ajax.Updater(target, url, {method: ''get'', > > parameters: pars, onComplete: setModel}); > > Fixed. Now I''m getting content back in Firefox only and not IE6 when > calling with Ajax.Updater. When I call with Ajax.Request I get > content back in both Firefox and IE6. > > I''m verifying the content by calling an onComplete to this function: > function showResponse(originalRequest) > { > //put returned XML in the textarea > $(''result'').value = originalRequest.responseText; > } > > I''m using Prototype 1.4.0 final. Any ideas?One other test I''ve done is instead of "model" being a <select> I changed it to a <div> and it populates the element like it should in both Firefox and IE6. Is there something special about the <select> element that prevents it from being populated with HTML? Should I populated it somehow via the DOM by creating the elements? If so, how? Any suggestions on how to solve this would be greatly appreciated! Kevin -- Kevin Old kevinold-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
Hey Hm.. can we see your code for this? I have a feeling you''re doing too many levels of HTML escaping. -Rob Kevin Old wrote:>On 2/9/06, Kevin Old <kevinold-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > >>Hi Tom, >> >>On 2/9/06, Tom Riley <tom-PBmQmKy+xGfg53LLcykzWA@public.gmane.org> wrote: >> >> >>>The above line looks wrong - the onComplete shouldn''t be there and >>>should be a separate element in the options hash passed to >>>Ajax.Updater. E.g: >>> >>>var yearAjax = new Ajax.Updater(target, url, {method: ''get'', >>>parameters: pars, onComplete: setModel}); >>> >>> >>Fixed. Now I''m getting content back in Firefox only and not IE6 when >>calling with Ajax.Updater. When I call with Ajax.Request I get >>content back in both Firefox and IE6. >> >>I''m verifying the content by calling an onComplete to this function: >>function showResponse(originalRequest) >> { >> //put returned XML in the textarea >> $(''result'').value = originalRequest.responseText; >> } >> >>I''m using Prototype 1.4.0 final. Any ideas? >> >> > >One other test I''ve done is instead of "model" being a <select> I >changed it to a <div> and it populates the element like it should in >both Firefox and IE6. Is there something special about the <select> >element that prevents it from being populated with HTML? Should I >populated it somehow via the DOM by creating the elements? If so, >how? > >Any suggestions on how to solve this would be greatly appreciated! >Kevin >-- >Kevin Old >kevinold-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org >_______________________________________________ >Rails-spinoffs mailing list >Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Rob, On 2/9/06, Robin Haswell <rob-gyMb1R/nBgNh8AIihN9Rc9BPR1lH4CV8@public.gmane.org> wrote:> Hey > > Hm.. can we see your code for this? I have a feeling you''re doing too many > levels of HTML escaping.Sure, attached is the the complete set of code. Note that "/util/model_select_response" when passed a "make", returns the HTML for the <options> like below: <option value="(no_model_specified)">(no_model_specified)</option> <option value="2n">2n</option> <option value="500xl">500xl</option> <option value="68b">68b</option> <option value="8n">8n</option> <option value="9n">9n</option> <option value="a400">a400</option> Keep in mind that I''m trying to accomplish 2 things with this page: 1) Onload populate & set "make", "model" and "year" with the values of "the_make", "the_mode" and "the_year" (if defined in the global vars by server side code displaying this page). 2) Reload "model" and "year" as new "make" is selected. Thanks for any help with this. Kevin -- Kevin Old kevinold-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs