Now that I have upgraded to Rails 3, I'm trying to find the right way to split and reuse javascript fragments. Here is the scenario that I have in mind:
I have a page with two areas: one with items to be dragged and the other with droppables.
When loading the page, I use jQuery to configure draggables and droppables. I currently have a script in the head of application.html.erb, which I'm sure is not the right solution, but at least works.
When I click the button on the page, an ajax call is made for my controller, which replaces the draggables with a new set of elements, which should also be draggable. I have a js.erb file that does partial in the right place. After rendering, I need to make the new elements draggable, so I would like to reuse the code that currently lives in application.html.erb, but I did not find the right way to do this. I can only drag and drop new elements by inserting the code directly into the js.erb (yuck) file.
What I would like: - a javascript file containing prepdraggables () and prepdroppables () functions - a way to call any of the functions from application.html.erb or from the js.erb file
I tried using: content_for to store and reuse the code, but can't make it work correctly.
What I now have in the head.html.erb section
<% 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();