2017-03-09 10 views
0

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

ユースケースは、並べ替えに使用されるドラッグアンドドロップテーブルです。行をドラッグすると、期待どおりにテーブルが並べ替えられます。しかし、いったんドラッグすると、値のシリアライズはランダムなようです。したがって、何かを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フィールドを使用していることを知っていたブートストラップのテーブルですデフォルトでは、なぜ私は一貫した戻り値を得ることができないのか理解できません。

+0

は、あなたがリターン成功応答質問に関連していない –

+0

前にシリアライズ持っていますが、あなただけのループを() 'と' bindParam() '一回ではなく、毎回準備'呼び出す必要があります。ステートメントを準備してバインドしたら、ループ内で 'execute()'を呼び出して、異なる値の変数で同じクエリを繰り返し実行することができます。 – Barmar

+0

ありがとう、私は 'execute()'がパラメータを取ることができないことを認識しませんでした。私は間違いなくこれを調べます。 @ Henrique-yc、私はJavascriptですばらしくはありません。これがAjaxでの最初の試みです。あなたは$ .ajax 'success'の一部としてserialize関数を定義する必要があると言っていますか? – Sage

答えて

0

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すべきです。サーバーから
+0

Javascriptでソートしている場所が表示されません。 'data'変数は何ですか? – Barmar

1

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

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

ありがとうございます。私が知る限り、それはまだランダムであるようです。 My $ _POSTデータはインデックスとそれ以外のものを表示しますが、それをMySQLスクリプトに渡すと、期待通りの順序にないように見えます(間違ったカテゴリが変わることもあります)。 – Sage

関連する問題