# Scriptaculous droppable groups

**URL:** <https://www.ruby-forum.com/t/scriptaculous-droppable-groups/69143>\
**Category:** Rails\
**Created:** [September 18, 2006, 11:21pm UTC](https://www.ruby-forum.com/t/scriptaculous-droppable-groups/69143 "2006-09-18T23:21:11Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Garrett](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3e96dc/32.png) [@Garrett](https://www.ruby-forum.com/u/Garrett)\
**Post date:** [September 18, 2006, 11:21pm UTC](https://www.ruby-forum.com/t/scriptaculous-droppable-groups/69143/1 "2006-09-18T23:21:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Garrett](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3e96dc/32.png) [@Garrett](https://www.ruby-forum.com/u/Garrett)\
**Post date:** [September 18, 2006, 11:53pm UTC](https://www.ruby-forum.com/t/scriptaculous-droppable-groups/69143/2 "2006-09-18T23:53:15Z")

</div>

On 9/19/06, Garrett [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> 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

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  
  
HTML  
end

def employee\_draggable(employee)  
html = \<\<-HTML  
  
HTML  
end

end

And in your view:

\<% for project in @projects %\>

 Some project details here 
 \<%= project\_drop\_target project %\> \<% end %\>

\<% for employee in @employees %\>

 Some employee details here 
 \<%= employee\_draggable employee %\> \<% end %\>

---

<div class="post-metadata">

**Author:** ![Garrett](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3e96dc/32.png) [@Garrett](https://www.ruby-forum.com/u/Garrett)\
**Post date:** [September 20, 2006, 12:15am UTC](https://www.ruby-forum.com/t/scriptaculous-droppable-groups/69143/3 "2006-09-20T00:15:19Z")

</div>

\> \> 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

---

<div class="post-metadata">

**Author:** ![Garrett](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3e96dc/32.png) [@Garrett](https://www.ruby-forum.com/u/Garrett)\
**Post date:** [September 28, 2006, 11:13pm UTC](https://www.ruby-forum.com/t/scriptaculous-droppable-groups/69143/4 "2006-09-28T23:13:59Z")

</div>

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")}

---

<div class="post-metadata">

**Author:** ![Garrett](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3e96dc/32.png) [@Garrett](https://www.ruby-forum.com/u/Garrett)\
**Post date:** [September 19, 2006, 11:23pm UTC](https://www.ruby-forum.com/t/scriptaculous-droppable-groups/69143/5 "2006-09-19T23:23:13Z")

</div>

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

 Build: index 

How do I get the Javascript to properly inject?

---

<div class="post-metadata">

**Author:** ![Garrett](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3e96dc/32.png) [@Garrett](https://www.ruby-forum.com/u/Garrett)\
**Post date:** [October 5, 2006, 1:29am UTC](https://www.ruby-forum.com/t/scriptaculous-droppable-groups/69143/6 "2006-10-05T01:29:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Garrett](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3e96dc/32.png) [@Garrett](https://www.ruby-forum.com/u/Garrett)\
**Post date:** [October 5, 2006, 1:37am UTC](https://www.ruby-forum.com/t/scriptaculous-droppable-groups/69143/7 "2006-10-05T01:37:30Z")

</div>

Oh and  
\<%= drop\_receiving\_element(“task\_#{task.id}”, :url =\>  
{ :controller =\> “tasks”, :action =\> “add\_employee” }) %\>

---

<div class="post-metadata">

**Author:** ![Garrett](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3e96dc/32.png) [@Garrett](https://www.ruby-forum.com/u/Garrett)\
**Post date:** [September 29, 2006, 5:35am UTC](https://www.ruby-forum.com/t/scriptaculous-droppable-groups/69143/8 "2006-09-29T05:35:00Z")

</div>

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