I'm not sure if returning html is the way to go here but I'm not experienced at all with JSON and maybe that's the answer to my problem.
I have two ul lists with items, they all have a select in them and the first list contains all the items with the selected option equal to cero, the other list has the rest:
<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>
As you see there's a lot of code and it all comes from a database. I have a few ajax calls going on here (deleting, adding new items) but the one I have a problem with is when I change the selected option. This is my code now (on change of the select):
EDIT: Added the click function (it's not change because I'm using jqTransform to style the selects but it's the same as using change with a regular select)
$('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"});
}
}
}
});
});
In my ajax-invi.php file I query de database to see if the person can move to the new selected option (basically you put people in tables, you can't place a person in a full table and that needs to be controlled) and I return -1 if the table is full or 0 if it isn't, but if I need to move it then I have a problem because I'm not returning the html that I need to move.