Update specific list using ajax after pressing the button of the specific list

Question

How to update a specific list <li> using ajax after the success method.

Here's the simple <li> structure with <div> containing text:

<ul>
  <li>
    <div>List1</div>
    <input class="update" type="submit" name="update" value="Update">
  </li>
  <li>
    <div>List2</div>
    <input class="update" type="submit" name="update" value="Update">
  </li>
</ul>

And here's a simple javascript with ajax:

$(function() {
  $(".update").click(function() {
    var data = "List updated";

    $.ajax({
      method: "POST",
      url: "update_list.php"
      data: data,
      cache: false,
      success: function() {
        // update the specific list
      }
    })
  })
})

Assuming that the data, which is a string, sends to the php file, updates the database, then sends back the string to update a specific list after click the update button of the specific list. Lets say the first list will be updated. How can I update the specific list after a click the update button of a specific list?

Answer 1

Since you're using jQuery it's .siblings() selector.

$(function() {
  $(".update").click(function() {
    let data = "List updated";
    let sibling = $(this).siblings();

    $.ajax({
      method: "POST",
      url: "update_list.php"
      data: data,
      cache: false,
      success: function() {
        sibling.text("Whatever");
      }
    })
  })
})

https://jsfiddle.net/309q5852/

Answer 2

Refer to this question: Getting the ID of the element that fired an event

What you want is to get the current clicked element's parent 'li', and then find the div inside it. So something like the following:

$(function() {
  $(".update").click(function() {
    var data = "List updated";
    var parentlistElement = $(this).parent(); // points to li

    $.ajax({
      method: "POST",
      url: "update_list.php"
      data: data,
      cache: false,
      success: function(response) {
        // update the specific list item
        parentListElement.find('div').text(response);
      }
    })
  })
})