Rails 3: How do I call a javascript function from a js.erb file

Question

Now that I've upgraded to Rails 3, I'm trying to figure out the proper way to separate and reuse pieces of javascript. Here's the scenario I'm dealing with:

---

I have a page with two areas: one with elements that should be draggable, the other with droppables.

When the page loads I use jQuery to setup the draggables and droppables. Currently I have the script in the head portion of application.html.erb, which I'm sure is not the right solution but at least works.

When I press a button on the page, an ajax call is made to my controller that replaces the draggables with a new set of elements that should also be draggable. I have a js.erb file that renders a partial in the correct location. After rendering I need to make the new elements draggable, so I'd like to reuse the code that currently lives in application.html.erb, but I haven't found the right way to do it. I can only make the new elements draggable by pasting the code directly into my js.erb file (yuck).

What I'd like to have: - a javascript file that contains the functions prepdraggables() and prepdroppables() - a way to call either function from application.html.erb or from a js.erb file

I've tried using :content_for to store and reuse the code, but can't seem to get it working correctly.

---

What I currently have in the head section of application.html.erb

<% content_for :drag_drop_prep do %>
  <script type="text/javascript" charset="utf-8">
  $(document).ready(function () {

  // declare all DOM elements with class draggable to be draggable
  $( ".draggable" ).draggable( { revert : 'invalid' });

  // declare all DOM elements with class legal to be droppable
  $(".legal").droppable({
    hoverClass : 'legal_hover',
    drop : function(event, ui) {

      var c = new Object();
      c['die'] = ui.draggable.attr("id");
      c['cell'] = $(this).attr("id");
      c['authenticity_token'] = encodeURIComponent(window._token);

      $.ajax({
         type: "POST",
         url: "/placeDie",
         data: c,
         timeout: 5000
      });

  }});
});
</script>
<% end %>

undo.js.erb

$("#board").html("<%= escape_javascript(render :partial => 'shared/board', :locals => { :playable => true, :restartable => !session[:challenge]}) %>")
// This is where I want to prepare draggables.
<%= javascript_include_tag "customdragdrop.js" %> // assuming this file had the draggables code from above in a prepdraggables() function
prepdraggables();

Answer 1

Couldn't you just put the code in drag_drop_prep into a function and then call the function from the application.html.erb and each partial? I'm guessing I have misunderstood.

function prepdraggables(){
  // declare all DOM elements with class draggable to be draggable
  $( ".draggable" ).draggable( { revert : 'invalid' });

  // declare all DOM elements with class legal to be droppable
  $(".legal").droppable({
    hoverClass : 'legal_hover',
    drop : function(event, ui) {

      var c = new Object();
      c['die'] = ui.draggable.attr("id");
      c['cell'] = $(this).attr("id");
      c['authenticity_token'] = encodeURIComponent(window._token);

      $.ajax({
         type: "POST",
         url: "/placeDie",
         data: c,
         timeout: 5000
      });
  }});
}

And in application.html.erb and undo.js.erb:

prepdraggables();