CODEWITHSUNDEEP
javascriptajaxjquery
Elaine Marley
Elaine Marley

Reputation: 2213

jQuery Ajax how to tell jquery where to append the html data returned from Ajax call

I have two ul lists that have the same structure:

<ul id="list1">
    <li id="inv-1">
        <label>Item name</label>
        <select>
           <option selected="selected"> value="1">Value 1</option>
        </select>
    </li>
    //...
    <li id="inv-2">
        <label>Item name</label>
        <select>
           <option selected="selected"> value="1">Value 1</option>
        </select>
    </li>
 </ul>
<ul id="list2">
    <li id="inv-44">
        <label>Item name</label>
        <select>
           <option selected="selected"> value="0">Value 0</option>
        </select>
    </li>
    //...
    <li id="inv-55">
        <label>Item name</label>
        <select>
           <option selected="selected"> value="0">Value 0</option>
        </select>
    </li>
 </ul>

They both look the same but have different ids. In list 1 I have all li's that have option selected > 0. In the second list I have all the li's with option selected == 0.

I can add more items to the list pressing a button that pops a fancybox asking me for the new name for the new item and the value of the selected option. I need to append the new li item to the proper list after it's included to the database.

My jQuery function goes like this:

$(".btn.invi").fancybox({
  afterClose : function() {
    var nombre=$('#addinvi').val();
    $.ajax({
    type: "POST",
    url: "ajax-invi.php",
    dataType: "html",
    data: "id="+idboda+"&name="+name+"&value="+value",
    success: function(data) {
      $('ul#list1').append(data);//How do I know where to append??
    }
    }); 
  }
});

How do I tell the success function where to append based on the value of that selected option?

Right now the data returned from ajax-invi.php is something like this (after setting the values with php to the mysql database)

    <li id="inv-22">
        <label>Item name</label>
        <select>
           <option selected="selected"> value="1">Value 1</option>
        </select>
    </li>

Upvotes: 0

Views: 1509

Answers (2)

Jibi Abraham
Jibi Abraham

Reputation: 4696

IDs are unique in a page. You have 2 list items with the same id.

<ul id="list1">
<li id="inv-1">
    <label>Item name</label>
    <select>
       <option selected="selected"> value="1">Value 1</option>
    </select>
</li>
//...
<li id="inv-2"> //Note the change in ID
    <label>Item name</label>
    <select>
       <option selected="selected"> value="1">Value 1</option>
    </select>
</li>

Once this change is made, in your success function

$(".btn.invi").fancybox({
    afterClose : function() {
    var nombre=$('#addinvi').val();
    $.ajax({
        type: "POST",
        url: "ajax-invi.php",
        dataType: "html",
        data: "id="+idboda+"&name="+name+"&value="+value,
        success: function(data) {
            //perfom your tests here
            //based on your result do either of the following
            $('ul#invlist').find('#inv-1').append(data);
            $('ul#invlist').find('#inv-2').append(data);
        }
     });

});

Upvotes: 2

Frederiek
Frederiek

Reputation: 1613

It will append like you said. In the ul with id "#invlist".

If you want to append it more specifick i think you need to look what the data is and procces it into a stucture before appending it somewhere.

Upvotes: 0

Related Questions