Where to put custom JavaScript/Prototype code for an ActiveScaffold form?

Question

I have a Select dropdown on the form of an ActiveScaffold. I am trying to hide some of the fields on the form if a particular value is selected.

A [similar question][1] was posted to the ActiveScaffold Google Group, and the supplied Prototype code looks to do what I need, however I don't know where I need to add this.

--

I tried taking a copy of -horizontal-subform-header.html.erb from Vendor/plugins/ active_scaffold/frontends/default/views, placing it in views folder of my controller, and then adding my script into it:

<script type="text/javascript">
  document.observe('dom:loaded', function() {  //do it once everything's loaded
    //grab all the product-input classes and call 'observe' on them :
    $$('.product-input').invoke('observe', 'change', function(e) {
      this.up('td').next('td').down('input').hide();
    });
  });
</script>

... but that doesn't seem to work properly. It works if I use a URL to go direct to the form (i.e. http://localhost:3000/sales/20/edit?%5Fmethod=get). But when I test it with the main list view (i.e. http://localhost:3000/sales/) and opening the form via Ajax, then it doesn't work. Looking at the HTML source the just does not appear.

Answer 1

The common place for adding JavaScript is application.js found in public/javascripts. I'm a jQuery guy myself, however I'm sure you can hook up to the onchange event in application.js with prototype. A quick search looks like Event.observe should do the trick.