jQuery Ajax,在列表之间移动列表项

时间:2012-03-19 09:31:35

标签: php ajax jquery

我不确定返回html是否可以到达这里,但我对JSON没有任何经验,也许这就是我的问题的答案。

我有两个包含项目的ul列表,它们都有一个选项,第一个列表包含所选项目等于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调用(删除,添加新项目),但我遇到问题的是当我更改所选选项时。这是我的代码(在更改选择时):

编辑:添加了点击功能(它没有改变,因为我使用jqTransform来设置选择的样式,但它与使用常规选择的更改相同)

$('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"});
      }
    }
  }
 }); 
});

在我的ajax-invi.php文件中,我查询数据库以查看该人是否可以移动到新选择的选项(基本上你将人放在表中,你不能将一个人放在一个完整的表中,并且需要如果表已满,我返回-1,如果不是,则返回0,但如果我需要移动它,那么我有一个问题,因为我没有返回我需要移动的html。

1 个答案:

答案 0 :(得分:2)

我在这里做了一些关于你想要什么的假设,但是假设你想把LI从invlistsinmesa移到invlist这里是你想要移动数据的代码。您不需要从调用返回任何html,因为HTML已存在于您的文档中。假设.ajax调用中的id是LI id,例如inv-56,那么这里是代码:

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