Sortable_list added to by AJAX question

Rails
1

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

2

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 – [email protected]

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

3

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 :slight_smile: 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 – [email protected]

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

4

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

5

Quoting Marcus V. [email protected]:

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 :slight_smile: Hopefully
your patch will eleminate the need for that.

Nice to see at least I can help someone :wink:
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 – [email protected]

6

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.