Problem adding item to sortable list

Question

I'm not entirely sure how to post this question, but here goes...

I have a web app that has a list of sortable items. I sort them ajax style using Sortable. That works like a charm. I can drag and drop the items till my heart is content.

At the same time, there is a button that allows for the creation of new items on my list. This is also ajaxified and works for the most part. The new item appears on my list anyway, and firebug shows that the code being rendered is exactly the same as the other list items. Oh and it is contained in the correct list.

The problem is that the new item is not draggable/sortable/whatever. I can't do anything with it unless I refresh the page. Any ideas why this is the case or how I can get around it? I'd really like to solve this.

I tried to paste code in here, but couldn't quite make it work, so I went with pastie. Anyway, here is the code for a page with 2 sortable items. This is a fresh load and everything works as expected. http://pastie.org/432585

In this one, I have clicked the button that creates a new section, but not refreshed. So the first 2 sections are DnD-able, but the new one is not... http://pastie.org/432591

I'm using ruby and rails to do the ajaxing here and admittedly, I'm not very familiar with how it should work. But I believe this behavior comes from prototype.js and maybe dragdrop.js.

Answer 1

On completion of the ajax call that causes the new element to be injected into the page, the new element, I imagine, needs to be bound to the DOM, and delared as a Sortable.

Would be great if you could show us some code, or at least let us know which library(s) you are using for ajax and Sortable elements.