# Sortable\_list added to by AJAX question

**URL:** <https://www.ruby-forum.com/t/sortable-list-added-to-by-ajax-question/72216>\
**Category:** Rails\
**Created:** [February 23, 2006, 6:48am UTC](https://www.ruby-forum.com/t/sortable-list-added-to-by-ajax-question/72216 "2006-02-23T06:48:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![marcus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@marcus](https://www.ruby-forum.com/u/marcus)\
**Post date:** [February 23, 2006, 6:48am UTC](https://www.ruby-forum.com/t/sortable-list-added-to-by-ajax-question/72216/1 "2006-02-23T06:48:59Z")

</div>

I have a working sortable\_list that is added to by AJAX. The problem is  
that when a new item is added, it’s not sortable. I found a post on  
scriptaculous using behaviour.js to refresh the DOM when an item is  
added, but I can’t figure out how to do it with Rails.

To test the behaviour method, I used this:

var myrules={  
‘div#steps ul’ : function(element) {  
Sortable.create(‘steps\_list’, {handle:‘handle’,  
onUpdate:function(){new Ajax.Request(’/goals/sort/4’,  
{asynchronous:true, evalScripts:true, onComplete:function(request){new  
Effect.Highlight(‘steps\_list’,{});},  
parameters:Sortable.serialize(‘steps\_list’)})}})  
}  
}  
Behaviour.register(myrules);

Then called Behaviour.apply(); every time a step was added to the goal.  
It actually works to a point, but the problem lies in  
Sortable.create–it’s static and doesn’t know which ‘goal’ I’m  
attempting to sort.

How can I re-call sortable\_view (or get the same effect) without  
refreshing the entire page so it gets the items I added with AJAX?

Thanks…Marcus

---

<div class="post-metadata">

**Author:** ![marcus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@marcus](https://www.ruby-forum.com/u/marcus)\
**Post date:** [February 23, 2006, 7:01am UTC](https://www.ruby-forum.com/t/sortable-list-added-to-by-ajax-question/72216/2 "2006-02-23T07:01:14Z")

</div>

Marcus V. wrote :  
| How can I re-call sortable\_view (or get the same effect) without  
| refreshing the entire page so it gets the items I added with AJAX?  
|

Hi Marcus,

I had the same problem, and (almost) fixed it. Th epoint is to call  
again the sortable\_element when your new list item is added.

In my pet application I did this by:

- using RJS templates are they are quite handy to describe th  
eJavascript you want to apply to your page
- a patch I’ve done on Rails (ticket #3893) that add the  
sortable\_element method to the JavaScriptGenerator (in order to  
avoid replicating the sortable\_element in my RJS template).

## Best Regards,

Frederick R. aka Sleeper – removed\_email\_address@domain.invalid

Don’t diddle code to make it faster - find a better algorithm.  
- The Elements of Programming Style (Kernighan & Plaugher)

---

<div class="post-metadata">

**Author:** ![marcus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@marcus](https://www.ruby-forum.com/u/marcus)\
**Post date:** [February 23, 2006, 2:13pm UTC](https://www.ruby-forum.com/t/sortable-list-added-to-by-ajax-question/72216/3 "2006-02-23T14:13:25Z")

</div>

Frederick  
Thanks! I spent hours, and after reading your email it takes me 5  
minutes to finally fix it.

This is what I ended up doing:  
I added:

\<%= render :partial =\> 'sortable\_element', :locals =\> {:goal =\> @goal} %\>

to my view.

The partial just contains:  
\<%= sortable\_element ‘steps\_list’,  
:url =\> { :action =\> “sort”, :id =\> goal},  
:complete =\> visual\_effect(:highlight, ‘steps\_list’),  
:handle =\> “handle”%\>

Then in my RJS file ‘create\_step’ I added this:  
page.replace\_html ‘sortable’, :partial =\> ‘sortable\_element’, :locals =\>  
{:goal =\> @goal}

Almost too simple a solution and no repeated code for the most part. The  
only thing that bugs me is that it’s yet another partial 🙂 Hopefully  
your patch will eleminate the need for that.

Thanks again,  
Marcus

Frederick R. wrote:

> Marcus V. wrote :  
> | How can I re-call sortable\_view (or get the same effect) without  
> | refreshing the entire page so it gets the items I added with AJAX?  
> |
> 
> Hi Marcus,
> 
> I had the same problem, and (almost) fixed it. Th epoint is to call  
> again the sortable\_element when your new list item is added.
> 
> In my pet application I did this by:
> 
> - using RJS templates are they are quite handy to describe th  
> eJavascript you want to apply to your page
> - a patch I’ve done on Rails (ticket #3893) that add the  
> sortable\_element method to the JavaScriptGenerator (in order to  
> avoid replicating the sortable\_element in my RJS template).
> 
> ## Best Regards,
> 
> Frederick R. aka Sleeper – removed\_email\_address@domain.invalid
> 
> Don’t diddle code to make it faster - find a better algorithm.  
> - The Elements of Programming Style (Kernighan & Plaugher)

---

<div class="post-metadata">

**Author:** ![marcus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@marcus](https://www.ruby-forum.com/u/marcus)\
**Post date:** [April 5, 2006, 10:21am UTC](https://www.ruby-forum.com/t/sortable-list-added-to-by-ajax-question/72216/4 "2006-04-05T10:21:47Z")

</div>

Hi Marcus,

This is exactly what I need to do, but I am completely confused. I  
added what you said to add, and changed the values accordingly, but I  
am pretty sure that I did it completely wrong or am missing the  
implementation completely. If you are willing to help me out on this  
I would be extremely grateful.

Dave

---

<div class="post-metadata">

**Author:** ![marcus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@marcus](https://www.ruby-forum.com/u/marcus)\
**Post date:** [February 23, 2006, 2:21pm UTC](https://www.ruby-forum.com/t/sortable-list-added-to-by-ajax-question/72216/5 "2006-02-23T14:21:55Z")

</div>

Quoting Marcus V. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid):

> Almost too simple a solution and no repeated code for the most part. The  
> only thing that bugs me is that it’s yet another partial 🙂 Hopefully  
> your patch will eleminate the need for that.

Nice to see at least I can help someone 😉  
I do not know if my patch will be taken into accoutn. I do think that  
several  
other scriptaculous method should found their way through RJS …

Frederick R. aka Sleeper – removed\_email\_address@domain.invalid

---

<div class="post-metadata">

**Author:** ![marcus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@marcus](https://www.ruby-forum.com/u/marcus)\
**Post date:** [April 5, 2006, 1:49pm UTC](https://www.ruby-forum.com/t/sortable-list-added-to-by-ajax-question/72216/6 "2006-04-05T13:49:53Z")

</div>

Dave Krupinski wrote:

> Hi Marcus,
> 
> This is exactly what I need to do, but I am completely confused. I  
> added what you said to add, and changed the values accordingly, but I  
> am pretty sure that I did it completely wrong or am missing the  
> implementation completely. If you are willing to help me out on this  
> I would be extremely grateful.
> 
> Dave

not 100% related, but I’m sure the problem will pop up: If you want the  
newly loaded sortable to be able to exchange draggables with existing  
sortables, use this function:

var drop\_containers=new Array();  
function add\_to\_sortable\_containments(element) {

drop\_containers.push($(element));  
Droppables.drops.each(function(d) { d.\_containers=drop\_containers});

}  
It updates the “containment” property of all droppables on the page to  
the value of drop\_containers.