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

[ruinen]

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.

A similar question was already posted to the ActiveScaffold Google
Group [http://groups.google.com/group/activescaffold/browse%5Fthread/
thread/a298a48cf4ff0a1c/241feec5dd169153], and the supplied Prototype
code looks to do what I need, however I don't know where I need to add
this.

[ruinen]

In the end, I think I've found my own solution. I need to make these
changes in a subform, so I took a copy of
_horizontal_subform_header.html.erb from Vendor/plugins/
active_scaffold/frontends/default/views and placed it in views folder
of my controller.

I left the HTML of this erb unchanged and just added at the top my
script ...

<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>

[ruinen]

Actually that doesn't seem to work. I was testing it using the direct
URL to the edit form (i.e. http://localhost:3000/sales/20/edit?_method=get)
and with this it works. When I use it on http://localhost:3000/sales/
and the form is opened via Ajax, then it doesn't work. Looking at the
source the <script> disappears.

[ruinen]

Looks like I have the same issue as
http://groups.google.com/group/activescaffold/browse_thread/thread/204fb8b838eddced/d1b6c36ad27dce2e

On Dec 6, 9:14 pm, ruinen <ruinenl...@googlemail.com> wrote:
> Actually that doesn't seem to work. I was testing it using the direct

> URL to the edit form (i.e.http://localhost:3000/sales/20/edit?_method=get)
> and with this it works. When I use it onhttp://localhost:3000/sales/

[ruinen]

If I put the script into _list_header.html then it still doesn't work.
I assume this is because when I set the observes on '.product-input'
at the begining there is actually none in the DOM. When load a form
with a create new/edit, then the nearly visible product-inputs don't
have the observe invoked.

[ruinen]

OK so I think I am nearly there.

If I put the script in _horizontal_subform_header.html.erb then
although it doesn't appear in the HTML source, it seems it is getting
executed.

It is just that I am using document.observe. So without
document.observe, the code works when the form loads as Ajax, but
doesn't work using direct URL.

With document.observe, the code doesn't work when the form loads as
Ajax, but does work using direct URL.

[Sergio Cambra .:: entreCables S.L. ::.]

On Domingo, 6 de Diciembre de 2009 21:32:44 ruinen escribió:
> In the end, I think I've found my own solution. I need to make these
> changes in a subform, so I took a copy of
> _horizontal_subform_header.html.erb from Vendor/plugins/
> active_scaffold/frontends/default/views and placed it in views folder
> of my controller.
>
> I left the HTML of this erb unchanged and just added at the top my
> script ...
>

You can use <%= render :super %> instead of copy the html. Sometimes you will
need to pass parameters in :locals option, as the view which render
_horizontal_subform_header.html.erb. Probably:
<%= render :super, :locals => {:parent_record => parent_record} %>

> <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>

--
Sergio Cambra .:: entreCables S.L. ::.
Mariana Pineda 23, 50.018 Zaragoza
T) 902 021 404 F) 976 52 98 07 E) ser...@entrecables.com

[Sergio Cambra .:: entreCables S.L. ::.]

Look at lowpro and Event.onReady, it observe dom:loaded, but if document is
already loaded execute the function inmediately. You can copy that function,
or use lowpro