Задержка и затухание не работают должным образом после вызова AJAX

Question

У меня есть следующий вызов AJAX, и после того, как звонок AJAX был успешным, я хотел бы получить сообщение #success для задержки и затухания. В настоящее время все это делает показать на возможно .2-.3 секунды, а затем он уходит быстрее, чем он пришел.

$(document).ready(function() { 
    $('.approve').click(function() { 
     $.ajax({ 
      url: 'userRequest_approve.php', 
      data: { 
       id: $(this).val(), //id 
       status: 'Approved' //status 
      }, 
      success: function (data) { 
       //do something with the data that got returned 
       $('#success').html('User Status Changed!'); 
       $('#success').delay(5000).fadeOut(400); 
      }, 
      type: 'POST' 
     }); 
    }); 
}); 

Моя форма ..

<form action="" method="POST" id="status"> 
    <input type='hidden' name='id' value='<?php echo $pending_id; ?>' id='pending_id' /> 
    <?php if ($pending_firstname==t rue) { echo "Name - ". $pending_firstname . " " . $pending_lastname . "</br>" . "Username - ". $pending_username . "</br></br>" //echo print_r($_POST); ?> 
</form> 
<button class="approve" type="submit" form="status" name="approve" value="<?=$pending_id;?>">Approve</button> 

Я сделал a Fiddle для этого ... https://jsfiddle.net/jr7tuLep/

Я получаю сообщение об ошибке, и я понятия не имею, что это значит, но я вложил в него исходный код, а не php.

Кто-нибудь видит, что я делаю неправильно с этим? (У меня есть библиотека JQuery в моем файле)

Это немного за пределами моего первоначального вопроса, но с моим вызовом AJAX существует ли способ обнаружить, когда что-то не работает правильно и отправляет сообщение с этим?

Answer 1

Это работает для меня:

HTML:

<form id="status"> 
    <input type='hidden' name='id' value='23' id='pending_id' />Name - john</br>Username - john</form> 
<button class="approve" type="submit" form="status" name="approve" value="23">Approve</button> 
<div id="success" style="color: red;"></div> 
<br> 

JS код:

$('.approve').click(function() { 
    $.ajax({ 
     url: '/echo/html', 
     type: 'POST', 
     data: { 
      id: $(this).val(), //id 
      status: 'Approved' //status 
     }, 
     success: function (data) { 
      //do something with the data that got returned 
      $("#success").fadeIn(); 
      $("#success").show(); 
      $('#success').html('User Status Changed!'); 
      $('#success').delay(5000).fadeOut(400); 
     }, 

    }); 
    return false; 
}); 

Вы можете управлять ошибок в AJAX с помощью свойства ошибок, так же, как и вы с успехом , С другой стороны, если код на стороне сервера решает, что что-то пошло не так, вы можете вернуть логическое и сообщение об ошибке, указывающее, что пошло не так, чтобы вы могли отобразить его пользователю.

Answer 2

Попробуйте заменить

$('#success').delay(5000).fadeOut(400); 

со стандартным таймаута JavaScript

setTimeout(function() { 
    $('#success').fadeOut(400); 
}, 5000); 

В случае, если вы не прикладывая задержку между множеством функций JQuery ($('#success').fadeIn(400).delay(500).fadeOut(600);) может быть более подходящим для использования функции setTimeout() вместо.