Thanks Jörn I got it working!!!
On Sep 1, 5:46 am, Jörn Zaefferer <[email protected]>
wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
