JQuery UI sortable saving with connected lists

Question

I have two lists (1 and 2) and I want to update them when an item is moved from one to another.

HTML:

<ul class="sortable" id="task-list">
   <li id="listItem_1">Value 1 </li>
   <li id="listItem_2">Value 2 </li>
   <li id="listItem_3">Value 3 </li>
</ul>

<ul class="sortable" id="task-list-two">
   <li id="listItem_4">Value 1 </li>
   <li id="listItem_5">Value 2 </li>
   <li id="listItem_6">Value 3 </li>
</ul>

JS:

$("#task-list, #task-list-two").sortable({ 
   handle : '.handle',
   connectWith: ".sortable" 
   update : function () { 
     var order = $('#task-list').sortable('serialize'); 
     $("#info").load("process-sortable.php?"+order); 
   } 
});

But I want to update the list (1 or 2) as well. Do I need to post an additional variable to process.sortable.php ?

The foreach I currently have is only for the first list (simplified):

$task = nl2br($_POST['task']);
$userid = $_SESSION['userid'];
$position = $_POST['p'];
$date = $_POST['date'];

$i = "INSERT INTO tasks VALUES('','$task','$userid','0','$position','$date')";
$doi = mysql_query($i) or die(mysql_error());

Thanks in advance!

UPDATED FOREACH PHP:

foreach ($_GET['listItem'] as $position => $item)
{
    $list = $_GET['list'];
    if($list == "task-list")
    {
        $list = 1;
    }
    if($list == "task-list-two")
    {
        $list = 2;
    }
    $sql = "UPDATE `tasks` SET `position` = $position AND date = '$list' WHERE `id` = $item"; 

    print($sql);
    $dosql = mysql_query($sql) or die(mysql_error());
}

If all you're doing is running a serverside script, you probably should'nt be using load() ? — adeneo
– adeneo, Commented May 19, 2013 at 14:17

Greg Alexander · Accepted Answer · 2013-05-19 15:13:07Z

3

You could just pass the lists id to the PHP page like:

$("#info").load("process-sortable.php?"+order+"&list="+$(this).attr('id'));

Once on the PHP page, you can make a condition for the list type.

You will also need to change the order variable to account for the different lists:

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

edited May 19, 2013 at 15:13

answered May 19, 2013 at 14:23

Greg Alexander

1,2223 gold badges13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Andre Over a year ago

Seems legit. However, I do get this error: Invalid argument supplied for foreach(). Update my question with the foreach code.

Andre Over a year ago

That almost works. It updates the items, but not with the right lists. It gives it the list id from wich it came, not to which it goes. Any idea how to solve that?

Greg Alexander Over a year ago

I made a fiddle example to mess with, I am not seeing the problem... though perhaps my example does not take all variables into account. My Example

Andre Over a year ago

Thanks, your example made it work. However, I only have a problem when moving items from list 2 to 1, it still sees it as item from list 2 when I drop it as the last item from list 1. How can I stop that?

Greg Alexander Over a year ago

Still not 100% sure of the problem, the only thing I could see is that if you move the last item from list 1 to list 2, your update will run but will have blank values for list 1 (because there is no longer any items in list 1.) I updated the example to deal with a blank list.

Collectives™ on Stack Overflow

JQuery UI sortable saving with connected lists

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related