jQueryシリアル化の順序がランダムに見える

Question

JQuery UIでシリアル化すると、表示される順序ではなく値が返されるようです。私が知る限り、配列はランダムな順序になっていますので、必要な順番で並べ替えることはできません。

ユースケースは、並べ替えに使用されるドラッグアンドドロップテーブルです。行をドラッグすると、期待どおりにテーブルが並べ替えられます。しかし、いったんドラッグすると、値のシリアライズはランダムなようです。したがって、何かをitem-2に移動すると、2になると予想されます。しかし、order 0、order 7、order 10になることがあります。テーブルを取得して並べ替えるにはどうすればよいですか？注文は期待されていますか？

ここに私のjavascriptです：

var fixHelperModified = function(e, tr) { 
     var $originals = tr.children(); 
     var $helper = tr.clone(); 
     $helper.children().each(function(index) { 
      $(this).width($originals.eq(index).width()) 
     }); 
     return $helper; 
    }, 
    updateIndex = function(e, ui) { 
     $('td.index', ui.item.parent()).each(function (i) { 
      $(this).html(i + 1); 
     }); 
    }; 

//noinspection JSUnresolvedFunction 
$('#sortable').sortable({ 
    helper: fixHelperModified, 
    axis: 'y', 
    opacity: 0.5, 
    cursor: 'move', 
    stop: updateIndex, 
    update: saveRows 
}).disableSelection(); 

function saveRows(){ 
    var tableRows = $(this).sortable('serialize'); 

    // POST to server using $.post or $.ajax 
    //noinspection JSUnresolvedVariable 
    $.ajax({ 
     cache: false, 
     url: "/plugins/site/themes/admin/ajaxUpdate.php", 
     type: "POST", 
     data: tableRows 
    }); 
} 

とMySQL更新する私のPHP：

<?php 
require_once($_SERVER["DOCUMENT_ROOT"] . "/cfg.php"); 
foreach ($_POST['rowsort'] as $id => $order){ 

    $sql = "UPDATE `categories` SET `order` = :categoryorder WHERE `id` = :categoryid;"; 
    $stmt = mySQL::getConnection()->prepare($sql); 
    $stmt->bindParam(':categoryorder', $order); 
    $stmt->bindParam(':categoryid', $id); 
    $stmt->execute(); 
    $stmt->closeCursor(); 
} 

私のHTMLはid="rowsort-<?php echo $i; ?>"

私はserialize()は、idフィールドを使用していることを知っていたブートストラップのテーブルですデフォルトでは、なぜ私は一貫した戻り値を得ることができないのか理解できません。

Answer 1

Barmarの答えは、Henriqueのコメントと同じです。私は間違いなく、アレイ混ざってますが、そこに多くのJavaScript側にいた、さらに、私は完全にしくじっHTML側、上：

これは働いていた：

function saveRows(){ 
    var data = $('#sortable tr').map(function() { return { 
     id: $(this).attr("rowsort") }; 
    }); 
    var tableRows = $(this).sortable('serialize'); 

    // POST to server using $.post or $.ajax 
    //noinspection JSUnresolvedVariable 
    $.ajax({ 
     cache: false, 
     url: "/plugins/site/themes/admin/ajaxUpdate.php", 
     type: "POST", 
     data: tableRows 
    }); 
} 

問題は、私は必要なことでしたシリアライズする前にソートする。私がそれをしたら、私はもっと近づきましたが、それはまだ正しくありませんでした。私のHTMLでは、$iを私のIDとして使っていましたが、私はすでにデータベースに本当のIDを持っていました。上記のjavascriptを変更してからid=rowsort-<?php echo category['id'];?>を使用するのは本当の解決策でした。

この質問/経験は私を大いに助けました。将来的にソートが問題になることが判明した他の人のために：

• あなたは1（とないランダムまたはシーケンシャル、無関係な番号）を持っている場合は、あなたのHTML内のIDは、データベースのIDである必要があり
• あなた$_POSTからforeachループはあなたのソート順をリストして、データベース内の実際のIDすべきです。サーバーから

Answer 2

あなたはforeachループに$idと$orderを逆順に持つと思います。パラメータのインデックスはソートされたリスト内の位置を反映し、値はrowsort-<number> IDの数値です。したがって、それは次のようになります。

foreach ($_POST['rowsort'] as $order => $id) { 
    ... 
}