Question

i’m having trouble with the serialize Jquery fonction.
Fist, i create my li element with a php script, my data are written in my database (with “id”, “contenu”, “position”) and catch it in my html :

<article>
<ul id="columns">
    <?php 
        $req01=mysql_query("SELECT * FROM mytable ORDER BY id DESC");
        $i=0;

        while ($res01=mysql_fetch_array($req01)){                    
            $i++;
            echo '
                <li class="column" id="listItem_'.$res01["position"].'" draggable="true">
                <p>'.$res01["contenu"].'</p>
                </li>';
        }
    ?>
</ul>
</article>

And here’s my script

$(document).ready(function() {

$("#columns").sortable({ 
    column : '.column', 
    update : function () { 
    var order = $('#columns').sortable('serialize'); 
    $("#info").load('structure-reform.php?'+order); 
    //alert("Data Loaded: " + order);
    }
 }); 

    }); 
</script>

And here the way i update my DB when my li order is changing

foreach ($_GET['listItem'] as $position => $item) :
$list[] = "$position, $item";
$req03=mysql_query("UPDATE mytable SET position='".$position."' WHERE id='".$item."'");
$result = mysql_query($req03);
endforeach;

The thing is that, when i reload my page, my list isn’t sorted the right way…How can i do in order to keep my list in the last order ?
Thanks !

Answer 1

Your logic wasn’t correct.

replace your javascript with this:

$("#columns").sortable({ update: function() {
                    var order = $(this).sortable("serialize");
                    $.post("structure-reform.php", order);
                }
                });

replace your list html with this

<li class="column" id="listItem_'.$res01['id'].'" draggable="true" rel="'.$perso.'">
                    <p>'.$res01["contenu"].'</p>
                </li>';

replace your while loop with this

$listingCounter = 1;
    foreach ($_POST['listItem'] as $recordIDValue) {

        $query = "UPDATE structure SET position = " . $listingCounter . " WHERE id = " . $recordIDValue;
        mysql_query($query) or die('Error, insert query failed');
        $listingCounter = $listingCounter + 1;
    }

    echo 'If you refresh the page, you will see that records will stay just as you modified.';