Remove the sortable before the Ajax call, then reinitialize the
sortable after the content has loaded.
On May 28, 8:44 pm, jGalzic
<jgal...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> I am using drag & drop with Sortable.create between 2 groups on a page
> but I''m running into a problem with the elements not dragging and
> dropping after a section update with ''Ajax.Request''.
>
> When the page is initially loaded, everything works but after I invoke
> the remote update which refreshes the specific div that contains the
> Sortables, the elements are no longer droppable.
>
> Should I be recreating a new set of Sortable object whenever the div
> section is returned from the server or only once when the page is
> initially loaded? I tried both and neither seem to work for me. Each
> time the items are returned back from the server, they have unique ids
> so there are never two ''item_1'' items for the div id in
''group1''
>
> prototype version: 1.6.1
> scriptaculous version: 1.8.1
>
> my html looks like:
>
> <form onsubmit="showLoader();
> new Ajax.Updater(''myUpdateSection'',
''/person/list'',
> {asynchronous:true,evalScripts:true,onComplete:function(e)
> {hideLoader()},parameters:Form.serialize(this)});return false"
> method="POST" action="person/list"
> id="myRemoteForm">
>
> <input fields go here>
>
> <input type="submit"
id="submitButton" name="submitButton"
> value="Update"/>
> </form>
>
> <div id="myUpdateSection">
>
> <div id="page">
> <div id="group1" class="section">
> <h3 class="handle">Group 1</h3>
> <div id="item_1"
class="lineitem">This is item 1</div>
> <div id="item_2"
class="lineitem">This is item 2</div>
> </div>
>
> <div id="group2" class="section">
> <h3 class="handle">Group 2</h3>
> </div>
> </div>
>
> <script type="text/javascript">
> // <![CDATA[
>
Sortable.create(''group1'',{tag:''div'',dropOnEmpty:
true, containment:
> sections,only:''lineitem''});
>
Sortable.create(''group2'',{tag:''div'',dropOnEmpty:
true, containment:
> sections,only:''lineitem''});
>
Sortable.create(''page'',{tag:''div'',only:''section'',handle:''handle''});
> // ]]>
> </script>
>
> </div>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---