Question

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.

Answer 1

I’m making some assumptions about what you want here, but assuming you want to move the LI from the invlistsinmesa to invlist here is the code you want for moving the data. You don’t need any html returned from your call because the HTML is already present in your document. Assuming the id in your .ajax call is the LI id, such as inv-56 then here is the code:

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