The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Muysewinkel (3) [Avatar] Offline
#1
I'm quite new to scriptaculous.

After looking at the demos and going through the wiki, I easily created a sortable list, however after I do an ajax call on the list the list is no longer sortable (drag and drop does not work anymore.

The list is in a <div> container which is refreshed after the ajaxcall.

here is the ajaxcall:
new Ajax.Updater({success:itemToUpdateSuccess, failure:itemToUpdateFailure}, serverSide , { method: 'get' });

Sortable.create("sortableList",
{dropOnEmpty : true,constraint : false, onUpdate : onUpdateFunction});


I tried destroying the sortable and recreating it after the ajax call but that did not solve my problem.
bear.bibeault (675) [Avatar] Offline
#2
Re: Sotable list no longer sortable after Ajaxcall
Recreating the sortable should work. You need to do this because your updater call is replacing the elements with new ones.

I would also destroy the sortable before the Ajax call while the attached elements still exist.

No JS errors?
Muysewinkel (3) [Avatar] Offline
#3
Re: Sotable list no longer sortable after Ajaxcall
I don't have any java errors. I tried destroying the sortable before the java call and recreating it afterwards, but still no luck.


I've removed the bullet points from the list with a style sheet. In IE I notice that after the java call the bullets are back (this is not the case in FF)


This is the java script function I use to run the ajax call:

function ajaxUpdater(serverSide, itemToUpdateSuccess, itemToUpdateFailure)
{

Sortable.destroy('firstlist_rev3');
new Ajax.Updater({success:itemToUpdateSuccess, failure:itemToUpdateFailure}, serverSide , { method: 'get' });
Sortable.create("firstlist_rev3",
{dropOnEmpty : true,constraint : false, onUpdate : testen});
}
davecrane (149) [Avatar] Offline
#4
Re: Sotable list no longer sortable after Ajaxcall
> I don't have any java errors. I tried destroying the
> sortable before the java call and recreating it
> afterwards, but still no luck.
>
>
> I've removed the bullet points from the list with a
> style sheet. In IE I notice that after the java call
> the bullets are back (this is not the case in FF)
>
>
> This is the java script function I use to run the
> ajax call:
>
> function ajaxUpdater(serverSide, itemToUpdateSuccess,
> itemToUpdateFailure)
> {
>
> Sortable.destroy('firstlist_rev3');
> new Ajax.Updater({success:itemToUpdateSuccess,
> ss, failure:itemToUpdateFailure}, serverSide , {
> method: 'get' });
> Sortable.create("firstlist_rev3",
> {dropOnEmpty : true,constraint : false, onUpdate
> pdate : testen});
> }

Hi,

Your problem lies in the sequence of events. In your current code, things will unfold like so:

1. you destroy the sortable
2. you fire off the ajax request
3. you recreate the sortable
4. the response arrives - asynchronously, remember?
5. innerHTML gets re-written

To correct it, move the code that recreates the sortable into the onComplete callback for the Ajax.Updater - it will then be executed after the response has come in, and the content has been updated. onComplete works just the same as for the plain Ajax.Request. Using the Updater, it isn't obligatory, but if you want to add behaviour to the content that you've just loaded from the server (which is what you're doing here), then its the way to go.

So, your code should look like:

new Ajax.Updater(
{success:itemToUpdateSuccess, ss, failure:itemToUpdateFailure},
serverSide , {
method: 'get',
onComplete:function(){
Sortable.create("firstlist_rev3", { /* etc. etc. */ });
}
});

BTW, I think the call to Sortable.destroy() is unnecessary, because reassigning a sortable automatically destroys any existing oneson an element, but leaving it in there as a signal of your intent is not going to hurt.

HTH

Dave
Muysewinkel (3) [Avatar] Offline
#5
Re: Sotable list no longer sortable after Ajaxcall
Sounds logical indeed.

However, I 've changed my ajax call to :


function ajaxUpdater(serverSide, itemToUpdateSuccess, itemToUpdateFailure)
{
Sortable.destroy('firstlist_rev3');
new Ajax.Updater(
{success:itemToUpdateSuccess, failure:itemToUpdateFailure},
serverSide ,
{
method: 'get',
onComplete:function(){Sortable.create("firstlist_rev3",{dropOnEmpty : true,constraint : false, onUpdate : testen});}
}
);
}

And still no luck with drag and drop after the ajax call.