web-dev-qa-db-ja.com

jQuery：sortable（ 'serialize'）が返すリストをどうするか？

JQueryでは、次のように「serialize」を使用して並べ替え可能なリストの位置を取得しています。

var order = $('ul').sortable('serialize');

変数 'order'は、次を受け取ります。

_id[]=2&id[]=3&id[]=1&id[]=4&id[]=5_

では、このデータをajax呼び出しでどのように使用できますか？

これは私がそれを行うことを計画している方法ですが、それは醜く、パラメータ名 'id'を変更することはできません：

$.post('ajax.php?'+order,{action:'updateOrder'});

たぶん、シリアル化を解除してから、変数「order」を内破して、それを1つのパラメーターだけに割り当てる必要がありますか？

サーバー側のコードに問題はありませんが、jQueryクライアントサイトのコードに問題があります。問題は、スクリプトのどこに「order」変数を配置するかということです。

私が与えた例では、クエリ文字列として追加しました。

_'ajax.php?'+order_

しかし、アクションパラメータと同じように、パラメータとして渡したいと思います。以下は機能せず、構文エラーを返します。

$.post('ajax.php?'+order,{action:'updateOrder',order});

jqueryajaxjquery-ui-sortableserialization
13
bart

それを見つけた！オプションを追加する必要がありましたkey:'string'変数名を「id」ではなく「string」に変更します。

var order = $('#projects ul').sortable('serialize',{key:'string'});

$.post('ajax.php',order+'&action=updateOrder');
16
bart

最善の方法は、sortable('serialize')をまったく使用しないことですが、jQueryを使用して、次のように、並べ替えられたIDを単純に反復することです。

_order = [];
$('ul').children('li').each(function(idx, Elm) {
  order.Push(Elm.id.split('_')[1])
});                                     
$.get('ajax.php', {action: 'updateOrder', 'order[]': order});
_

これには、リストにliがない場合、_order[]_パラメーターがまったく含まれないという点で、シリアル化されたソート可能ファイルをURL（またはパラメーター）に明示的に追加するよりも利点があります。 （この問題が発生したときは、sortable(connectWith: 'ul')を使用していたため、ユーザーが1つのリストからすべてのliをドラッグすることは完全に可能でした）。対照的に、シリアル化されたソート可能ファイルを追加すると、不要な「＆」が残ります。

13
David Waller

ニュースアイテムを注文していて、ページがこれをphpコード「？id [] = 2＆id [] = 3＆id [] = 1＆id [] = 4＆id [] = 5」に送信したとします。

$_POST['id'] # would be [2,3,1,4,5]

// Now we need to update the position field of these items    

foreach($_POST['id'] as $i=>$id ):
   // For our first record, $i is 0, and $id is 2.

   $post = Post::get($id); # Do you own database access here
   $post->position = $i; # Set the position to its location in the array
   $post->save(); # Save the record
endforeach
7
Daniel Von Fange
var order = $('#projects ul').sortable('toArray'});

これもうまくいくかもしれません;）

4
Lyubomir Marinov

最良の方法は、var order = $('ul').sortable('serialize');機能を使用することを知っていることです。次のリンクに示されています。

http://blog.arnaud-k.fr/2010/09/29/tutorial-jquery-trier-une-liste-en-dragndrop-avec-jqueryui-sortable/

PHPファイルで順序付きリストデータを取得するために必要なのは、コードだけです。

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

「キー」パラメータに関しては、配列を取得するために角括弧を使用しました。

var data = $('#cms-form').serialize();
data += '&' + $('.ui-tabs-nav').sortable('serialize', {key:'nav_order[]'});
2
Svetoslav Marinov

データが

_$data = 'album[]=stat&sort[]=157204&sort[]=157205&sort[]=157206&sort[]=157208&sort[]=157207&sort[]=157209&sort[]=157210&sort[]=157211&sort[]=157212&sort[]=157213';_

そしてあなたはphpで配列としてソートを取得したい
use parse_str（）
parse_str($data, $output);
print_r($output);

出力：配列（[アルバム] =>配列（[0] => stat）

_[sort] => Array
    (
        [0] => 157204
        [1] => 157205
        [2] => 157206
        [3] => 157208
        [4] => 157207
        [5] => 157209
        [6] => 157210
        [7] => 157211
        [8] => 157212
        [9] => 157213
    )
_

）

0
Vikas Dwivedi

解決

Sortable（ 'serialize'）を操作して、独自のソリューションを作成しました。 jquery関数を使用して簡略化し、データベース内のリストの順序を更新するためにphpurlに投稿しました。私のコードを見てください。

$( "#covercast_sortable" ).sortable({
        update : function () { 
            var order = $('#covercast_sortable').sortable('serialize',{key:'string'}); 
            // order var gives something like string=3&string=2&string=1
            var ar = order.split('&');
            var i = 0;
            var str = '';
            for(i;i<ar.length;i++){
                if(str != "") { str += ','; }
                // slice is used to remove 'sting=' from every value of var ar
                str += ar[i].slice(7);
            }
            // here value of str is 3,2,1 with respect to order variable
            $.ajax({
                type: "POST",
                url: 'myURL.php',
                data: 'order=' + str,
                cache: false,
                success: function (data) {
                    console.log(data);
                }
            });
        }
    });

乾杯

0
Ata ul Mustafa