CODEWITHSUNDEEP
phpjquery
drummer392
drummer392

Reputation: 473

Sortable Portlet Update Query

I am attempting to update some sortable divs that are connected with connectwith. I have done a single table before and the update query works, but when mutiple divs are involved it gets tricky. The problem is I have a field in the database called div that needs to update as well with whatever div the sortable object is getting dropped into AS WELL AS put it in a specific order within that div.

EDIT: SOOO, how can I create a sortable update query for multiple div.id locations?

The results I am getting from the code work for just updating the order inside one div, but across multiple divs there is no update. Plus, I'm not exactly sure of the easiest way to find the div I moved the content to and save that to the database.

Okay, so here's the code I have so far for just updating the order within one div:

$(".heriyah").sortable({ 
    handle : '.handle',
    connectWith: ".heriyah",
    revert: "invalid",
    update : function () { 
        var order = $('.heriyah').sortable('serialize'); 
        $("#info").load("admin/sortable.php?"+order); 
    } 
});

And the PHP:

foreach ($_GET['listItem'] as $position => $item) : 
    $sql[] = "UPDATE `temp` SET `order` = $position WHERE `id` = $item"; 
endforeach; 
print_r ($sql);

And the HTML/PHP to produce the content (using alot of PHP and JQuery):

<script type="text/javascript">
(function() {
    $('div.heriyah').each(function() { 
    $(this).html('<div class="add"><div id="add_button_container"><div id="add_button" class="edit_links">+ ADD NEW CONTENT</div></div></div><div class="clear"></div><div class="placeable" style="height:20px;background-color:#fff;"></div></div>');

    var curID = $(this).attr('id');//get the id before you go into fallr

$('.add').click(function() {
$.fallr('show', {
    content     :  '<iframe width="620" height="600" src="<? echo $URL ?>/manage_content.php?pageID=<? echo $pageID; ?>&div='+ curID +'"></iframe>',
    width       : 620 + 5, // 100 = for width padding
    height         : 600,
    closeKey        : true,
    closeOverlay    : true,
    buttons     : {}
    }); 
 });    
}); 
})();
<?
include_once('system/js/dbc.php');
$pageID = $_REQUEST['pageID'];
$getdiv2 = mysql_query("SELECT * FROM temp WHERE pageID = '$pageID' ORDER BY `order` ASC");
while ($row = mysql_fetch_assoc($getdiv2)) 
 {
   echo "$('#{$row['div']}.heriyah').append('<div class=sortable id=listItem_{$row['id']}><div id=heriyah_content class=sortable_header>{$row['title']}<br>{$row['maintext']}<div id=heriyah_handle class=handle></div><a onClick=edit_{$row['id']}();return false><div id=heriyah_content_hover></div></a></div></div>');\n";
 }
?>
</script>
<script>
$(".heriyah").sortable({ 
    handle : '.handle',
    connectWith: ".heriyah",
    revert: "invalid",
    update : function () { 
    var order = $('.heriyah').sortable('serialize'); 
    $("#info").load("admin/sortable.php?"+order); 
  } 
});
</script>
<div id="info"></div>

Upvotes: 1

Views: 531

Answers (1)

Mark McLaren
Mark McLaren

Reputation: 11540

I have produced something based on the jQuery UI connect-lists example.

I have not implemented the backend calling or database side components but I'm sure you can work that out. I am only interested in capturing what has moved and to where.

The receive event is triggered when you drag items between lists so we can use that.

We also need to catch the update event but are not interested in items that are already being dealt with by the receive event. To do this we need to check to see if ui.sender is undefined (as it will be for all non-connected list transfers). However it seems that the update event calls all the sortable containers when the update has completed. We only want to capture the data when the updated item's parent is the same as the list receiving the update event trigger. (I hope that makes sense!)

In summary the receive event will be used to capture all the inter connect-list transfers and the update event will capture any sorting that happens within an element list.

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="http://jqueryui.com/demos/sortable/"/>
    <meta charset="utf-8">
    <title>jQuery UI Sortable - Connect lists</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.6.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.sortable.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <style>
    #sortable1, #sortable2, #sortable3  { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
    #sortable1 li, #sortable2 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    </style>
    <script>
    $(function() {
        $( "#sortable1, #sortable2, #sortable3" ).sortable({
            connectWith: ".connectedSortable",
            update: function(event, ui){
               if(($(ui.sender).attr('id') == undefined)&&($(this).attr('id') == ui.item.parent().attr('id'))){
                   alert('UPDATE ' + $(this).attr('id') + ' ' + (ui.item.index()+1) + ' ' + $(ui.item).text());
               }
            },
            receive: function(event, ui){
               alert('RECEIVE: ' + $(ui.sender).attr('id') + '=>' + $(this).attr('id') + ' ' + (ui.item.index()+1) + ' ' + $(ui.item).text());
            }
        }).disableSelection();
    });
    </script>
</head>
<body>
<div class="demo">

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">A</li>
    <li class="ui-state-default">B</li>
    <li class="ui-state-default">C</li>
    <li class="ui-state-default">D</li>
    <li class="ui-state-default">E</li>

</ul>

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">F</li>
    <li class="ui-state-highlight">G</li>
    <li class="ui-state-highlight">H</li>
    <li class="ui-state-highlight">I</li>
    <li class="ui-state-highlight">J</li>
</ul>

<ul id="sortable3" class="connectedSortable">
    <li class="ui-state-default">K</li>
    <li class="ui-state-default">L</li>
    <li class="ui-state-default">M</li>
    <li class="ui-state-default">N</li>
    <li class="ui-state-default">O</li>
</ul>

</div>

</body>
</html>

Upvotes: 3

Related Questions