jQuery Ajaxリスト間でリスト項目を移動する

Question

ここに行く方法はHTMLを返すかどうか分かりませんが、私はJSONで全く経験していないかもしれません。

私は、アイテムを2つのulのリストを持っている彼らはすべてのそれらのselectを持っており、最初のリストは、CEROに等しい選択したオプションを持つすべての項目が含まれ、他のリストは残りの部分を持っている：

<ul id="invlistsinmesa"> 
    <li id="inv-56"> 
     <label>Name 1</label> 
     <select> 
      <option value="1">Mesa 1</option> 
      <option value="2">Mesa 2</option> 
      <option value="3">Mesa 3</option> 
        <!-- ... -->        
      <option selected="selected" value="0">Sin mesa</option> 
     </select> 
     <div class="delete_box"><a href="#invlistsinmesa" class="close">Delete</a></div>     
</li><li id="inv-57"> 
     <label>Name 2</label> 
     <select> 
      <option value="1">Mesa 1</option> 
      <option value="2">Mesa 2</option> 
      <option value="3">Mesa 3</option> 
        <!-- ... -->        
      <option selected="selected" value="0">Sin mesa</option> 
     </select> 
     <div class="delete_box"><a href="#invlistsinmesa" class="close">Delete</a></div>     
</li> 
</ul> 
<ul id="invlist"> 
    <li id="inv-36"> 
     <label>Name 1</label> 
     <select> 
      <option value="1">Mesa 1</option> 
      <option value="2">Mesa 2</option> 
      <option selected="selected" value="3">Mesa 3</option> 
        <!-- ... -->        
      <option value="0">Sin mesa</option> 
     </select> 
     <div class="delete_box"><a href="#invlistsinmesa" class="close">Delete</a></div>     
</li><li id="inv-37"> 
     <label>Name 2</label> 
     <select> 
      <option selected="selected" value="1">Mesa 1</option> 
      <option value="2">Mesa 2</option> 
      <option value="3">Mesa 3</option> 
        <!-- ... -->        
      <option value="0">Sin mesa</option> 
     </select> 
     <div class="delete_box"><a href="#invlistsinmesa" class="close">Delete</a></div>     
</li> 
</ul> 

として、たくさんのコードがあり、それはすべてデータベースから来ています。私はここでいくつかのAjax呼び出し（削除、新しい項目の追加）を行っているが、私が問題を抱えているのは、選択したオプションを変更するときです。

EDIT：jqTransformを使用して選択項目をスタイル設定しているため、変更されていません（変更は通常の選択と同じです）

私は、人は（基本的にあなたがテーブルに人を置く新しい選択したオプションに移動することができれば、あなたは完全なテーブルに人を配置することはできませんを参照してデデータベースを照会私のAJAX-invi.phpファイルで

$('li[id^="inv-"] div.jqTransformSelectWrapper ul li a').on('click', function(){ 
    var item=($(this).closest("li[id^='inv-']")).attr('id'); 
    var id = parseInt(item.replace("inv-", "")); 
    var nummesa= ($(this).closest('li')).attr('class'); 

$.ajax({ 
    type: "POST", 
    url: "ajax-invi.php", 
    dataType: "html", 
    data: "id="+id, 
    success: function(data) { 
    if(data>=0){ 
     if(data!=0){ 
     noty({"text":"Person has been moved"}); 
     }else{ 
     //Here I need to control if the list item needs to 
     //change to the other list or not 
     }   
    }else{ 
     if(data=='-1'){ 
     noty({"text":"Table is full, person cannot move there","type":"error"}); 
     } 
    } 
    } 
}); 
}); 

とそのテーブルがいっぱいであれば-1を返し、そうでなければ0を返しますが、移動する必要がある場合は、移動する必要のあるHTMLを返さないため問題があります。

Answer 1

私はあなたがここで何をしたいかについていくつか前提をしていますが、invlistsinmesaのLIをここに移動すると仮定すると、データを移動するコードがあります。 HTMLがドキュメントに既に存在するため、呼び出しから返されるhtmlは必要ありません。あなたの.ajax呼び出しのidがLI-idであると仮定すると、inv-56のようになります。コードは

var $item = $('#' + id); 
$('#invlist').append('<li id=' + id + '>' + $item.html() + '</li>'); 
$item.remove();