jquery, serialize the ui.item

Question

This is what I have so far. The code I have is contained in php so there is some php in it.

$(document).ready(function() {
    $(\"ul.droptrue\").sortable({
        connectWith: '.droptrue',
        remove:function(event, ui){ 
              var order = $(ui.item).serialize; 
              alert( order );
        },
        receive : function () {
       var order = $(this).sortable('serialize');
                  var list = 'list[]='+this.id+'&list[]=".$module[1]."&';
                  $.ajax({
                    type: 'POST',
                    url: '".__BASE_URL."modules/admin/moduleUpdate.php',
                    data: list+ order,
                    success: function(msg){alert(msg);},
                    error: function(msg){alert( \"Data Error: \"
+ msg );}
                  });
      }
    }); });

So what I am trying to do is get a serialized version of the ui.item. With the receive section I get an output of "listItem[]=3&listItem[]=4..." but with the ui.item I get "function () {return o.param(this.serializeArray());}".

How do I get a serialized version of ui.item?

Answer 1

You wrote:

var order = $(ui.item).serialize;

You probably wanted to write:

var order = $(ui.item).serialize();

Answer 2

I figured out what I was doing wrong. So this question does not need anymore help.

A brief summary of what I did.

I used the update function of the sortable and then I used php to determine what is being change and how to change it.

Here is the jquery code:

    $('ul.droptrue').sortable({
    placeholder: 'ui-state-highlight',
    connectWith: '.droptrue',
  update : function (event, ui){

        //vars needed
        var sender = null;
        var item = ui.item.context.id;
        var target = event.target.id;

        var order = $(this).sortable('serialize');

        if(ui.sender != null){
            sender = ui.sender.context.id;
        }
        $.ajax({
            type: 'POST',
            data: 'list[]='+this.id+'&list[]='+item+'&list[]=".$dirt[1]."&list[]='+sender+'&'+order,
            url: 'modules/admin/moduleUpdate.php'
        });
  }
});

Here is the php I used:

$widgetParts = explode('_', $_POST['list'][1]);
$widget = $widgetParts[1];

switch ($_POST['list'][0]) {
case 'header_layout':
    if($_POST['list'][3] == 'null'){
        if(isset ($_POST['listItem'])){
            if(in_array($widget, $_POST['listItem'])){
                foreach ($_POST['listItem'] as $key => $value) {
                    $sql = "UPDATE widget_layouts SET weight=".$key." WHERE module_id=".$_POST['list'][2]." AND position=1 AND widget_id=".$value;
                    mysql_query($sql);
                }
            }
        }else{
                $sql = "DELETE FROM widget_layouts WHERE module_id=".$_POST['list'][2]." AND widget_id=".$widget." AND position=1";
                mysql_query($sql);
            }

    }else{
        foreach ($_POST['listItem'] as $key => $value) {
            $sql = 'SELECT * FROM widget_layouts WHERE  module_id='.$_POST['list'][2].' AND widget_id='.$value.' AND position=1';

            if(mysql_num_rows(mysql_query($sql)) == 0){
                $sql = "INSERT INTO widget_layouts VALUES (".$_POST['list'][2].",".$widget.",1,".$key.")";
                mysql_query($sql);
            }
        }
    }

    break;
case 'content_layout':
    if($_POST['list'][3] == 'null'){
        if(isset ($_POST['listItem'])){
            if(in_array($widget, $_POST['listItem'])){
                foreach ($_POST['listItem'] as $key => $value) {
                    $sql = "UPDATE widget_layouts SET weight=".$key." WHERE module_id=".$_POST['list'][2]." AND position=2 AND widget_id=".$value;
                    mysql_query($sql);
                }
            }
        }else{
                $sql = "DELETE FROM widget_layouts WHERE module_id=".$_POST['list'][2]." AND widget_id=".$widget." AND position=2";
                mysql_query($sql);
            }
    }else{
        foreach ($_POST['listItem'] as $key => $value) {
            $sql = 'SELECT * FROM widget_layouts WHERE  module_id='.$_POST['list'][2].' AND widget_id='.$value.' AND position=2';
            if(mysql_num_rows(mysql_query($sql)) == 0){
                $sql = "INSERT INTO widget_layouts VALUES (".$_POST['list'][2].",".$widget.",2,".$key.")";
                mysql_query($sql);
            }
        }
    }
    break;
case 'sidebar_layout':
    if($_POST['list'][3] == 'null'){
        if(isset ($_POST['listItem'])){
            if(in_array($widget, $_POST['listItem'])){
                foreach ($_POST['listItem'] as $key => $value) {
                    $sql = "UPDATE widget_layouts SET weight=".$key." WHERE module_id=".$_POST['list'][2]." AND position=3 AND widget_id=".$value;
                    mysql_query($sql);
                }
            }
        }else{
                $sql = "DELETE FROM widget_layouts WHERE module_id=".$_POST['list'][2]." AND widget_id=".$widget." AND position=3";
                mysql_query($sql);
            }
    }else{
        foreach ($_POST['listItem'] as $key => $value) {
            $sql = 'SELECT * FROM widget_layouts WHERE  module_id='.$_POST['list'][2].' AND widget_id='.$value.' AND position=3';
            if(mysql_num_rows(mysql_query($sql)) == 0){
                $sql = "INSERT INTO widget_layouts VALUES (".$_POST['list'][2].",".$widget.",3,".$key.")";
                mysql_query($sql);
            }
        }
    }
    break;
case 'footer_layout':
    if($_POST['list'][3] == 'null'){
        if(isset ($_POST['listItem'])){
            if(in_array($widget, $_POST['listItem'])){
                foreach ($_POST['listItem'] as $key => $value) {
                    $sql = "UPDATE widget_layouts SET weight=".$key." WHERE module_id=".$_POST['list'][2]." AND position=4 AND widget_id=".$value;
                    mysql_query($sql);
                }
            }
        }else{
                $sql = "DELETE FROM widget_layouts WHERE module_id=".$_POST['list'][2]." AND widget_id=".$widget." AND position=4";
                mysql_query($sql);
            }
    }else{
        foreach ($_POST['listItem'] as $key => $value) {
            $sql = 'SELECT * FROM widget_layouts WHERE  module_id='.$_POST['list'][2].' AND widget_id='.$value.' AND position=4';
            if(mysql_num_rows(mysql_query($sql)) == 0){
                $sql = "INSERT INTO widget_layouts VALUES (".$_POST['list'][2].",".$widget.",4,".$key.")";
                mysql_query($sql);
            }
        }
    }
    break;
case 'widget_layout':
   foreach ($_POST['listItem'] as $key => $value) {
        $sql = "DELETE FROM widget_layouts WHERE module_id=".$widget." AND widget_id=".$value;
        $query = mysql_query($sql) or die(mysql_error());
   }
    break;
 }

These pieces of code allow me to create a drag and drop list to dynamically layout my website without any hassle. I hope these pieces of code could help someone out that is having the same type of problem that I was having.