I am using the demo from the jquery ui site that shows how to sort divs between columns. The sorting works well but when the user changes the placement of a div I need to get the placement of each div. I'm trying to use serialize on the update event but I get back an empty string. I am fairly new to all of this so I'm not sure what I'm doing wrong. Can anyone look at the code below and let me know? Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery- ui-1.7.2.custom.min.js"></script> <style type="text/css"> .column { width: 170px; float: left; padding-bottom: 100px; } .portlet { margin: 0 1em 1em 0; } .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; } .portlet-header .ui-icon { float: right; } .portlet-content { padding: 0.4em; } .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } .ui-sortable-placeholder * { visibility: hidden; } </style> <script type="text/javascript"> $(function() { $(".column").sortable({ connectWith: '.column', update: function(event, ui){alert($('.column').sortable ("serialize"));} }); $(".portlet").addClass("ui-widget ui-widget-content ui-helper- clearfix ui-corner-all") .find(".portlet-header") .addClass("ui-widget-header ui-corner-all") .prepend('<span class="ui-icon ui-icon-plusthick"></span>') .end() .find(".portlet-content"); $(".portlet-header .ui-icon").click(function() { $(this).toggleClass("ui-icon-minusthick"); $(this).parents(".portlet:first").find(".portlet-content").toggle (); }); $(".column").disableSelection(); }); </script> </head> <body> <div class="demo"> <div id="columns"> <div class="column" id="col1"> <div class="portlet" id="dv1"><a href="javascript:void(0);" onclick="document.getElementById('dv1').style.display='none';">Hide</ a> <div class="portlet-header">Feeds</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> <div class="portlet" id="dv2"><a href="javascript:void(0);" onclick="document.getElementById('dv2').style.display='none';">Hide</ a> <div class="portlet-header">News</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> <div class="portlet" id="dv3"><a href="javascript:void(0);" onclick="document.getElementById('dv3').style.display='none';">Hide</ a> <div class="portlet-header">Links</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> <div class="column" id="col2"> <div class="portlet" id="dv4"><a href="javascript:void(0);" onclick="document.getElementById('dv4').style.display='none';">Hide</ a> <div class="portlet-header">Shopping</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> <div class="portlet" id="dv5"><a href="javascript:void(0);" onclick="document.getElementById('dv5').style.display='none';">Hide</ a> <div class="portlet-header">Images</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> </div> </div><!-- End demo --> <div class="demo-description"> <p> Enable portlets (styled divs) as sortables and use the <code>connectWith</code> option to allow sorting between columns. </p> </div><!-- End demo-description --> </body> </html> --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
