ajax経由でサーバーにアイテムIDを送信する方法：jquery sortable

Question

私は再配置する必要がある画像のグループを持っています。だから私はそのdivの中にイメージを置く。私はそれを置き換えることができますが、それはajax経由でIDを送信していません。

HTML

<div class="row sortable"> 
    <div class="col-sm-4" id="1"> 
    <img src="//via.placeholder.com/200x150" /> 
    </div> 

    <div class="col-sm-4" id="2"> 
    <img src="//via.placeholder.com/200x150" /> 
    </div> 

    <div class="col-sm-4" id="3"> 
    <img src="//via.placeholder.com/200x150" /> 
    </div> 
</div> 

JSここ

$('.sortable').sortable({ 
    update: function(event, ui) { 
    $.ajax({ 
     data: $(this).sortable('serialize'), 
     type: 'POST', 
     url: '/echo/json/', 
     success: function(data) { 
     console.log(data); 
     } 
    }); 
    } 
}); 

は私のバイオリンです：http://jsfiddle.net/bmp6xoog/3/は

Answer 1

ドキュメントは明確に述べている

"setname_number"の各項目のIDを調べるとデフォルトで動作し、 "setname[]=number&setname[]=number"のようなハッシュを吐き出します。

注：serializeで空の文字列が返された場合は、id の属性にアンダースコアが含まれていることを確認してください。それらの形式は、 "set_number"の形式である必要があります。
例えば、id属性が"foo_1", "foo_5","foo_2"の3要素リストは、"foo[]=1&foo[]=5&foo[]=2"にシリアル化されます。
アンダースコア、等号またはハイフンを使用してセットを区切り、 の数字を使用できます。
たとえば、"foo=1","foo-1"および"foo_1"はすべて "foo[]=1"にシリアライズされます。など

あなたはそれが働いていない理由である、数字だけでIDを使用している、それは形式foo_1でIDにする必要があり

$('.sortable').sortable({ 
 
    update: function(event, ui) { 
 
    console.log($(this).sortable('serialize')); // works 
 
    
 
    $.ajax({ 
 
     data: $(this).sortable('serialize'), 
 
     type: 'POST', 
 
     url: '/echo/json/', 
 
     success: function(data) { 
 
     console.log(data); 
 
     } 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<div class="row sortable"> 
 
    <div class="col-sm-4" id="item_1"> <!-- like this --> 
 
    <img src="//via.placeholder.com/200x150" /> 
 
    </div> 
 

 
    <div class="col-sm-4" id="item_2"> <!-- and this --> 
 
    <img src="//via.placeholder.com/200x150" /> 
 
    </div> 
 

 
    <div class="col-sm-4" id="item_3"> <!-- and this --> 
 
    <img src="//via.placeholder.com/200x150" /> 
 
    </div> 
 
</div>

Answer 2

するためにはリストをシリアライズするには、このid = "id_3"のように要素のIDにアンダースコアを付ける必要があります