Give more time to show in ajax

Question

Give more time to show in ajax

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I have this code and I want to give it a little more time when displaying the #result element.

$(document).ready(function(){
    $('.para_envio').submit(function(){
		
	var x = confirm("Are you sure you want to update?");
      if (x){
        $.ajax({
          type: "POST",
          url: "ercc.php",
          data: $(this).serialize(),
          cache: false,
          success: function(data) {
                //$('#result').show(3000);
				
				$('#result') .html(data) ;
				$('#result').hide(5000);

            }
        });//end ajax
		return false;
      }
      
    });
});

javascript jquery ajax div

asked by Leonardo 19.05.2017 в 05:47

source

2 answers

asp net mvc5: Secondary actions are not allowed to execute redirect actions Error query sql oracle

score 2 · Answer 1

Try setTimeOut, where the first parameter is a function and the second is the time (in milliseconds, 1000ms = 1sec) it takes to execute:

 setTimeout(function(){ 
     $('#result').show(3000);
 }, 3000);

 success: function(data) {
   setTimeout(function(){ 
     $('#result').show(3000);
   }, 3000);                

   $('#result') .html(data) ;
   $('#result').hide(5000);

}

score 0 · Answer 2

Simply link a delay() with the time you want to the chain of events to do what you want:

$(document).ready(function(){
  $('#result').hide();
  $('.para_envio').submit(function() {
    var x = confirm("Are you sure you want to update?");
    if (x) {
      $.ajax({
        type: "post",
        url: "//httpbin.org/post",
        data: $(this).serialize(),
        cache: false,
        success: function(data) {
          /* Encadenamos aparición, espera y desaparición de los datos */
          $('#result').html(JSON.stringify(data)).
            fadeIn().delay(5000).fadeOut();
        }
      });  //end ajax
      return false;
    }  
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form class="para_envio" onsubmit="return false">
  <input type="hidden" name="valor" value="prueba"/>
  <input type="submit"/>
</form>
<div id="result"></div>

In this case it first appears (softly) with a fadeIn , then stays for 5000 ms (5 seconds) and finally disappears smoothly with fadeOut .