Rails spinoffs - Feb 2006 - Help needed with conflicting EventObserver

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
">&nbsp;</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
kevinold-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org

Since no one''s replied, I''ve thought of a few specific
questions
related to the code.

On 2/7/06, Kevin Old <kevinold-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> 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 } );
>             }
>     }
> }
>
Is there a more elegant way to parse down through the options of a
select list and set the value?  I''ve seen several functions in the
documentation like indexOf() and it seems like I could just use that,
but I get a message saying that "indexOf is not a method" when trying
to use it.

The reason I added the Updater in setMake() and other functions was
that the EventObserver wasn''t executing when the window.onload code
executed and set the correct value of make.  I assume since the
Updater and EventObserver were clashing, that there must be some way
for me to force an event?  If so, can someone point me to how I''d do
that?

Any help is appreciated!
Kevin
--
Kevin Old
kevinold-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org