You need to initialize sortables after the ajax loading:
$("#sortableinfo").load("sortfiles.php?"+order, function() {
$(this).sortable();
});
Jörn
On Tue, Sep 1, 2009 at 2:54 AM, TriAgency<[email protected]> wrote:
>
> So I will try to make this short and sweet. Anyone who has the answer
> to this will make my day :)
>
> I have been using jQuery for a while now and ran into a new issue when
> trying to ajaxify my UI a bit.
>
> I have a DIV on the page that is called TRACKLIST. Inside this sits a
> UL with an ID of 'SortFiles'
>
> I have the usual (document).ready code that initializes the SortFiles
> element as being sortable.
>
> In my AJAXing up the page, I have another set of buttons, that when
> clicked call a custom function, that updates the TRACKLIST with a
> fresh 'SortFiles' UL.
>
> My problem is that this new SortFiles is not getting .sortable set on
> it. I can confirm this by Inspecting the DOM in Safari (dev mode) and
> see that the newly loaded UL does not have a class="ui-sortable" on
> it.
>
> My code is below. Thanks!
>
> .....
> This is the HTML as I originally wrote it
>
> <div id="TrackList" style="width: 600px; height: 260px; overflow-x:
> auto;">
> <ul id="SortFiles">
> <li id="listItem_123">Song</li>
> <li id="listItem_124">Song 2</li>
> ...
> If I use Sortables, and include the following JS
>
> $(document).ready(function() {
>
> $("#SortFiles").sortable({
> update : function () {
> var order = $('#SortFiles').sortable('serialize');
> $("#sortableinfo").load("sortfiles.php?"+order);
> }
> });
> }};
>
> Then the HTML is updated at runtime as follows which is correct, my
> items are sortable, and the auto update after sorting works as
> expected.
>
> <div id="TrackList" style="width: 600px; height: 260px; overflow-x:
> auto;">
> <ul id="SortFiles" class="ui-sortable">
> <li id="listItem_123">Song</li>
> <li id="listItem_124">Song 2</li>
>
> .......
>
> However if I then have a button that calls a new function called
> SwapPlaylist.
>
> The JS for that looks like this, and works as far as the DOM is
> updated with the new UL which has been pulled in from another page.
> The 'data' that is sent is the URL of the new playlist that has the
> new SortFiles inside of it.
>
> The problem is that this new version of SortFiles does not
> have .sortables attached to it. So you can see my feeble attempt to
> call it. I have actually tried like 5 different things, including
> calling another function that calls the sortable, but I cant get it to
> work.
>
>
> function SwapPlaylist(data){
> var TheUrl = data + ' #SortFiles';
>
> $('#TrackList').load(TheUrl);
>
> // What I figured should have worked:
>
> $("#SortFiles").sortable();
>
> };
>
> Please o wise jQuery masters, tell me what I am doing wrong. Thanks a
> trillion.
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
