Ruby Forum Ruby on Rails > sortable_list added to by AJAX question

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

Marcus Vorwaller 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 Ros aka Sleeper -- sleeper@jabber.fr

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

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:
<div id="sortable">
<%= render :partial => 'sortable_element', :locals => {:goal => @goal} 
%>
</div>

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 Ros wrote:
> Marcus Vorwaller 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 Ros aka Sleeper -- sleeper@jabber.fr
> 
> Don't diddle code to make it faster - find a better algorithm.
>             - The Elements of Programming Style (Kernighan & Plaugher)

Quoting Marcus Vorwaller <vorwaller@gmail.com>:


> 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 Ros aka Sleeper -- sleeper@jabber.fr

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

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.