Hello everyone,
I have a page that populates/updates make, model and year select lists
via Ajax.Updater and I think that an EventObserver is causing a
conflict.
Here's what I'm trying to do. I'm using this page as a create and
edit page for a car database. If I'm calling the page in edit mode,
I'll want the make, model and year set (using the setMake(),
setModel() and setYear() functions).
I have an EventObserver on the make and model fields so that when they
change, they are updated.
The problem seems to be between the Updater call in setMake() and the
EventObserver for the make field.
Any suggestions on how I could rewrite this would be greatly appreciated!
Here's my code:
<script src="/js/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
setMake();
}
function setMake() {
var make = document.getElementById("make");
var makere = /ford/;
// 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;
var modelAjax = new Ajax.Updater({ success: 'model'},
'/util/model_select_response', { parameters: 'make='+m,
onComplete:setModel } );
}
}
}
function setModel() {
var model = document.getElementById("model");
model.disabled = false;
var modelre = /thunderbird/;
// Set the model
for (var i=model.options.length-1; i>=0; i--) {
var m = model.options[i].value;
if ( modelre.test(m) ) {
model.selectedIndex = i;
var yearAjax = new Ajax.Updater({ success: 'year'},
'/util/year_select_response', { parameters: 'id='+m,
onComplete:setYear } );
}
}
}
function setYear() {
var year = document.getElementById("year");
var yearre = /1964/;
// 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>
<!--
<script type="text/javascript">
window.onload = function () {
var model = document.getElementById("model");
var year = document.getElementById("year");
model.disabled = true;
year.disabled = true;
}
</script>
-->
<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>
<!-- Begin HTML::Prototype code for selects -->
<script type="text/javascript">
<!--
new Form.Element.EventObserver( 'make',
function( element, value ) {
$('model').innerHTML = ''
$('year').innerHTML = ''
; new Ajax.Updater( 'model', '/util/model_select_response', {
parameters: 'make='+value,asynchronous: 1,onComplete:
function(request){var model = document.getElementById('model');
model.disabled = false;} } )
} );
//-->
</script>
<script type="text/javascript">
<!--
new Form.Element.EventObserver( 'model',
function( element, value ) {
new Ajax.Updater( 'year',
'/util/year_select_response', { parameters: 'id='+value,asynchronous:
1,onComplete: function(request){var year =
document.getElementById('year'); year.disabled = false;} } )
} );
//-->
</script>
<!-- End HTML::Prototype code for selects -->
<br />
I'm using Prototype 1.4.0 final, if it helps.
Thanks for any help!!!
Kevin
--
Kevin Old
[EMAIL PROTECTED]
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
