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();
