jQuery uiのsortableの挙動について

Question

お世話になっております。
jQUeryUIのsortableの機能について質問です。
jQuery は1.12.4
jQuery UI ハ1.12.1を利用しております。

以下のようなHtmlがあったとします

<form method="post" accept-charset="utf-8" action="action.php">
<input type="text" name="row[]" value="1" />
<input type="text" name="row[]" value="2" />
<input type="text" name="row[]" value="3" />
<input type="text" name="row[]" value="4" />
<input type="text" name="row[]" value="5" />
<button type="submit">保存する</button>
</form>

通常であれば、POSTに入ってくる値は

["row"]=> array(5) {[0]=> string(1) "1" [1]=> string(1) "2" [2]=> string(1) "3" [3]=> string(1) "4" [4]=> string(1) "5"}

となると思います。

jQuery uiのsortable機能を利用してPOSTをした際に、
並べ替えをした状態でPOSTが出来ない事例が発生しております。
説明しづらいのですが、下の要素を上に持って行った際にPOSTに入ってくる値が変わりません。
例えば、value="4"のものを上から2番目に持って行ってもPOSTされた内容は同じです。
逆に２番目の要素を4番目に持って行くと、「1,3,4,2,5」とPOSTに入ってきます。

このような事例を経験された方などいらっしゃいましたら教えて頂けないででしょうか。

コンソール等にエラーは出ておりません。
よろしくお願いいたします。

Comments

[x_x]

POSTしているところのコードはどうなっているでしょうか？

[kenkbou]

var_dump($_POST);exit(); で受け取っているのみになります。よろしくお願いいたします。

Answer 1

同様の問題への対処として
結局原因はわからなかったんですが解決策としては
「適当でもいいのでキー値を入れる」でした

nameが全く同じだと要素の順番通りに値が
取得されない仕様なのかなんなのか
とりあえず詳細な原因は不明ですが
連番でなくても、乱数でもいいのでキー値を入れて
nameが全く同じにならないようにしておくと
要素の順番通りになったということがありました

Comments

[kenkbou]

ありがとうございます。
やはりJS側で乱数を作成して突っ込んでおくという方法で解決いたしました。

Answer 2

そもそもname=row[]を利用しているということはそれらの項目はすべて
同列の順不同なデータということですので順番が変わって困ることはないはず。
順番を、というよりキーを確保したいのであれば
name=r[0]~r[4]
のようにキー付きの名前にすればよいだけではないでしょうか？

sample

繰り返しになりますが、順番が重要ならキー付きの名前にして、
受け取った側で適切なソートをかけることです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function(){
  $("#sortable").sortable();
 });
</script>

<form method="post" action="recv.php">
<ul id="sortable">
<li><input type="text" name="row[0]" value="1"></li>
<li><input type="text" name="row[1]" value="2"></li>
<li><input type="text" name="row[2]" value="3"></li>
<li><input type="text" name="row[3]" value="4"></li>
<li><input type="text" name="row[4]" value="5"></li>
</ul>
<button type="submit">保存する</button>
</form>

• recv.php

$row=filter_input(INPUT_POST,"row",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
ksort($row);
print_r($row);

Comments

[kenkbou]

jqueryuiのsortableでsortをしておりますので、順番は固定であって欲しいんです。
おっしゃる通り連番を振ったら良いのですが、row[]ではいけないのかなと思っております。

[yambejp]

実際にinputの順番がいれかわっているわけですからrow[]を使う限り
渡された順番通りキーに採番されて格納されていきます
sampleつけましたので参考にしてください

[kenkbou]

ありがとうございます！順番づけをしておいて、POSTしてからsortするのですね、とても勉強になりました。

[kenkbou]

すみません、１点追加機能での質問なのですが、要素をappendしたりremoveした際にはやはりJS側で番号を振り直さないといけないですよね？

[yambejp]

> 要素をappendしたりremove

それはsortableの質問でしょうか？
javascriptで要素を追加する場合にnameは工夫が必要でしょうね
たとえば適当なclassやdata-name的な要素を作っておいて
そのlengthを数えてnameに当てはめていくのが妥当でしょう

[kenkbou]

ありがとうございます。やはりJS側で操作をすることも必要なのですね。勉強になりましたmm