我不确定返回html是否是解决问题的方法,但我对JSON没有任何经验,也许这就是我的问题的答案。
我有两个包含项目的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调用(删除、添加新项),但我遇到的问题是当我更改所选选项时。这是我现在的代码(在更改选择时):
编辑:添加了点击功能(它没有改变,因为我使用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文件中,我查询de数据库,看看这个人是否可以移动到新选择的选项(基本上你把人放在表中,你不能把一个人放在一个完整的表中,这需要控制),如果表已满,我会返回-1,如果表未满,则返回0,但如果我需要移动它,那么我就有问题了,因为我没有返回我需要移动的html。
我对您在这里想要什么做了一些假设,但假设您想要将LI从invlistsinmesa移动到invlist,这里是您想要移动数据的代码。您不需要从调用中返回任何html,因为html已经存在于文档中。假设.ajax调用中的id是LI id,例如inv-56,那么下面是代码:
var $item = $('#' + id);
$('#invlist').append('<li id=' + id + '>' + $item.html() + '</li>');
$item.remove();