Scriptaculous droppable groups

rubyonrails-talk
1

Does rails have a way to easily implement droppables for dynamically changing lists. I'd like to be able to take my database of employees, and my database of projects for that day and assign employees to projects by dropping them onto the project. My problem is, the projects are different every day, so I need to figure out how to create my groups dynamically.

Thanks

2

What I have done in these cases is to create a helper function that inserts the appropriate javascript block and call that function once for each droppable. Not the use of the :with parameter in the link_to_remote call. This will be executed as javascript in the context of the onDrop callback, this is how I get the id of the dropped employee. Code is untested, so there are likely some bugs in there, but the general idea works.

class SomeHelper

  def project_drop_target(project)    html = <<-HTML      <script>Droppables.add(                  "project_#{project.id}",                  {                     onDrop: function(element) {                       #{link_to_remote :update=>'project_'+project.id, :url=>{:controller=>'projects',:action=>'add_employee', :id=>project.id}, :with=>'employee_id=element.employee_id'}                     }                  }            );            </script>    HTML   end

  def employee_draggable(employee)     html = <<-HTML         <script>             $('employee_#{employee.id}').employee_id=#{employee.id};             Draggable.new( 'employee_#{employee_id}' );         </script>     HTML   end

end

And in your view:

<% for project in @projects %>   <div id="project_<%=project.id%>">     Some project details here   </div>   <%= project_drop_target project %> <% end %>

<% for employee in @employees %>   <div id="employee _<%=employee .id%>">     Some employee details here   </div>   <%= employee_draggable employee %> <% end %>

3

Thanks... I can tell this is exactally what I need, but I can't get the Injection of the javascript to work. My header is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; <html xmlns="http://www.w3.org/1999/xhtml&quot;&gt;

<head>   <title>Build: index</title>   <link href="/stylesheets/scaffold.css?1158610272" media="screen" rel="Stylesheet" type="text/css" />   <link href="/stylesheets/datagrid.css?1157134014" media="screen" rel="Stylesheet" type="text/css" />   <script src="/javascripts/prototype.js?1154117827" type="text/javascript"></script> <script src="/javascripts/effects.js?1154117827" type="text/javascript"></script> </head>

How do I get the Javascript to properly inject?

4

<snip>

How do I get the Javascript to properly inject?

Going back through my code. I realized the snippet I posted has some bugs.

Try:

Droppables.add("bucket_#{bucket.id}",           {             onDrop:function(element){               #{remote_function(:update=>"project_#{project.id}, :url=>{:controller=>'projects', :action=>'add_employee', :id=>project}, :with=>"'dropped=' + element.employee_id")}             }           }         );

Note the :with parameter changes to :with=>"'dropped=' + element.employee_id".

Let me know if that works, if not, please post the full html source of the generated page.

Cheers, Max

5

Sorry for the delay when I run the new piece of code I get a syntax error. The little arrow shows the error on the close parenthesis behind element.employee_id. If I only remove the # at {remote_function I get "can't find string "HTML" anywhere before EOF"

app/helpers/schedule_helper.rb:11: syntax error :id=>project}, :with=>"'dropped=' + element.employee_id")}

6

Droppables.add("bucket_#{bucket.id}",          {            onDrop:function(element){              #{remote_function(:update=>"project_#{project.id}", :url=>{:controller=>'projects', :action=>'add_employee', :id=>project}, :with=>"'dropped=' + element.employee_id")}            }          }        );

There was a missing " after "project_#{project.id}"

the #{something} is a string replacement notation the # in that case it not a comment.

Give it another try.

Max

7

I figured it out. There were a few bugs in your code, but I fixed them. Also the javascript for add employee is completely incorrect, simply using the rails built in method works great. <%= draggable_element "employee_#{employee.id}", :revert => true %>

Thanks for your help

8

Oh and <%= drop_receiving_element("task_#{task.id}", :url =>     { :controller => "tasks", :action => "add_employee" }) %>