Unobtrusive Toggling failing in Rails

Question

I've been at this for hours but it just isn't working. I'm trying to get ToggleJS working using Scriptaculous' Effects library. Specifically, the example: http://wiseheartdesign.com/page_attachments/0000/0075/demo.html.

I got it working beautifully using a pure html file called new.html. I then converted it to new.html.erb so I can incorporate some of the animations into my Rails project and it stopped working!

I tried both html and ruby javascript tags but neither are working, for example:

<%= javascript_include_tag "application", "prototype", "effects", "lowpro", "toggle" %>

The page's body is displaying on the browser, but without animations. I have made sure my javascript files are the same as the demo (plus, the html file is working with them anyway). Do you know where the problem might lie here with my .erb file?

A sample of the html I'm using:

<h3>Toggle.LinkBehavior</h3> 
    <div class="expand_me" id="one">Expanded!</div> 
    <p> 
      <a class="toggle" href="#one" rel="toggle[one]">Expand</a> 
    </p> 
    <div class="expand_me" id="two">Expanded! 1</div> 
    <div class="expand_me" id="three">Expanded! 2</div> 
    <p> 
      <a class="toggle" href="#two" rel="toggle[two,three]">Expand even more</a> 
    </p> 

#Application.js
Event.addBehavior({
   'a.toggle': Toggle.LinkBehavior(),
   'a.inverted_toggle': Toggle.LinkBehavior({invert: true}),
   'a.open': Toggle.LinkBehavior({
  effect: 'blind',
  onLoad: function(link) {
    this.toggle();
  },
  beforeToggle: function(link) {
    link.innerHTML = (link.innerHTML == "Open") ? "Opening..." : "Closing...";
  },
  afterToggle: function(link) {
    link.innerHTML = (link.innerHTML == "Opening...") ? "Close" : "Open";
  }
   }),
   'form input.checkbox.toggle': Toggle.CheckboxBehavior(),
   'form input.checkbox.inverted_toggle': Toggle.CheckboxBehavior({invert: true}),
   'form .radio_group.toggle': Toggle.RadioGroupBehavior({effect: 'blind'}),
   'form select.toggle': Toggle.SelectBehavior()
 });

Eimantas, I am a total newbie at this. I added to my html doc the following but it didn't work:

<script type="text/javascript">
window.onload = Event.addBehavior
</script>

Is this what you mean, or can you tell me what code I need to write in my .html.erb file?

Answer 1

Can you paste generated html for javascript files?

I think your toggle.js is loaded later than application.js file, hence if application.js has all the hook code (window.onload...) for toggling effect it will fail since the library itself isn't loaded yet.

UPDATE:

Here's how you put Event.addBehavior to window loading:

<script type="text/javascripts">
  window.onload = function() {
    Event.addBehavior({
      // all params and code.
    });
  }
</script>

You should check prototype documentation on doing prototype style window.onload function.