Hi. I'm going crazy trying to get .sortable('serialize') to recognize
new additions to the DOM. Any help would be appreciated. I'm working
on a drag and drop thingie using draggables, droppables and
sortables. The problem is like this: the user drops a "new" widget
onto the page, which is some form elements to fill out. Rather than
have the user have to save each new widget and then save the layout/
order of the widgets, I have one save button which looks for any new
or modified content, saves it to the db, and then saves the layout of
the items on the page using sortable('serialize') to get the item's id
from the container div. I.e., div opens like this:
<div class="pluslet " id="pluslet-121">
The problem is when I save a new widget. It has a random id like so:
<div class="pluslet unsortable" name="new-pluslet" id="44442">
When the save is run, it does the db query, and replaces this div with
the new div, which has a proper id. I.e.,
$('#'+insert_id).load("data2.php", {title:new_title, body:thebody,
flag: 'insert', staff_id: user_id, item_type: item_type},
function() {
var cnt = $('#'+insert_id).contents();
$('#'+insert_id).replaceWith(cnt);
});
At this point, the DOM has a new div that starts like this:
<div class="pluslet " id="pluslet-122">
And then I go on to save the layout. Unfortunately, when I run
var center_data = $('#portal-column-1').sortable('serialize');
var sidebar_data = $('#portal-column-2').sortable('serialize');
It doesn't see the new node, but the one with the random id. I've
tried .sortable('refresh'), making the sortable into a function and
calling it again, etc., etc., but nothing seems to work.
If I drag the new item to a new position, then it's found, and
everything works okay. If I save things once, and then hit save
again, it finds the new div with the correct id, but I can't seem to
get it to recognize the new div otherwise.
In summary: Help!
Thanks so much,
A.
p.s. here's my original sortable:
$(".sort-column").sortable({
connectWith :['#portal-column-1', '#portal-column-2'],
opacity: 0.7,
tolerance: 'intersect',
cancel: '.unsortable',
update: function(event, ui) {
$("#save_guide").show("slow");
}
});
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
