Сохранение ответа jQuery AJAX в правильной области/контексте

Question

У меня есть контент, который генерируется динамически с каждым элементом контента, содержащим простую одноконтактную форму для добавления/удаления одного из этих элементов контента в/из избранного списка. Я использую метод ajax jQuery для публикации формы и получения ответов (ответов), и все работает отлично, за исключением того, что обратный вызов успеха применяется к каждому элементу кнопки в каждой форме, когда он должен применяться только к нажатой кнопке. Я боролся с этим часами и не уверен, почему это не в правильном объеме.

Вот мой JQuery:

$('form.ajax').on('submit', function(){ 
    var that = $(this), 
     url = that.attr('action'), 
     type = that.attr('method'), 
     data = {}; 

    that.find('[name]').each(function(index, value) { 
     var that = $(this), 
      name = that.attr('name'), 
      value = that.val(); 

     data[name] = value; 
    }); 

    $.ajax({ 
     url: url, 
     type: type, 
     data: data, 
     success: function(response) { 
      $('button').text(response); 
     }; 
    }); 

    return false; 
}); 

Вот формы, которые генерируются:

if($user->isLoggedIn()) { 
    $addFave = NULL; 
    $favorites = DB::connectDB()->query("SELECT * FROM ajaxfavourites WHERE user = '{$userid}' AND favid = '{$favid}'"); 
    $matches = mysqli_num_rows($favorites); 
    if ($matches == 0) { 
     $addFave = ' 
      <form action="../app/parsers/faves_addremove.php" method="post" class="ajax"> 
       <input type="hidden" name="user" value="' . escape($user->data()->id) . '"> 
       <input type="hidden" name="favid" value="' . ++$nfave . '"> 
       <button id="addFave" class="btn rb-faucet-button btn-default bg-color-1"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Add To Faves</button> 
      </form> 
     '; 
    } else { 
     $addFave = ' 
      <form action="../app/parsers/faves_addremove.php" method="post" class="ajax"> 
       <input type="hidden" name="user" value="' . escape($user->data()->id) . '"> 
       <input type="hidden" name="favid" value="' . ++$nfave . '"> 
       <button id="addFave" class="btn rb-faucet-button btn-default bg-color-1"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Remove From Faves</button> 
      </form> 
     '; 
    } 
} else { 
    $addFave = ''; 
} 

И, наконец, здесь является Ajax скрипт работает с добавить/удалить из базы данных и генерировать мой ответы:

if(isset($_SESSION['userid'])){ 
    if (isset($_POST['user'], $_POST['favid'])) { 
     if ($_POST['user'] = $user->data()->id) { 
      $userid = $_POST['user']; 
      $favid = $_POST['favid']; 

      $favorites = DB::connectDB()->query("SELECT * FROM ajaxfavourites WHERE user = '{$userid}' AND favid = '{$favid}'"); 
      $matches = mysqli_num_rows($favorites); 
      if ($matches == '0') { 
       DB::connectDB()->query("INSERT INTO ajaxfavourites (user, favid) VALUES ('{$userid}', '{$favid}')"); 
       echo "Added"; 
      } 
      if ($matches != '0') { 
       DB::connectDB()->query("DELETE FROM ajaxfavourites WHERE user = '{$userid}' AND favid = '{$favid}'"); 
       echo "Deleted"; 
      } 
     } else { 
      echo "Invalid user."; 
     } 
    } 
} else { 
    echo "Invalid session."; 
} 

Если я нажму на кнопку, чтобы добавить элемент в таблицу ajaxfavourites m Текст ответа «Добавлено» применяется к каждому элементу кнопки на странице в любой форме с классом «ajax». Что мне не хватает? Я, хотя я имел это должным образом в сфере охвата, и ничего, что я пробовал, похоже, работает.

Answer 1

Вы обращаетесь ко всем кнопкам в своем обратном вызове, $('button') вернет все кнопки на странице.

вы должны использовать что-то вроде этого:

success: function(response) { 
    that.find('button').text(response); 
} 

Поскольку that ссылается на form вы работаете, то find должен получить все button элементы в форме.

Если у вас есть более одной кнопки в форме, вы должны дать ей описательный класс. i.e that.find('button.useThisButton').text(response);