Show wait GIF while ajax makes the request

Question

Show wait GIF while ajax makes the request

Navigation

#1 by (1 votes)

0

I have the following HTML code:

 <div id="detalles-modalE" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Detalle de Pedido.-</h4>
        </div>
        <div class="modal-body edit-content"></div>
    </div>
</div>

And the following JS code that calls the modal and sends the data through ajax:

$('#detalles-modalE').on('show.bs.modal', function(e) {

var $modal = $(this),
//-> aqui llamo a mis variables ->//

$.ajax({
 cache: false,
 type: 'POST',
 url: 'miurl',
 data: {misdatos},
 success: function(data) {
  $modal.find('.edit-content').html(data);
 } 
}) 
})

What I need is that while the ajax request is being made, a loading gif will be displayed, but inside the fashion window. I have read and searched for several examples, but none has worked. Does anyone have an idea of how to do that ?. I appreciate any help or guidance in this regard. Greetings.

javascript ajax modal

asked by maha1982 25.11.2018 в 20:14

source

1 answer

error Popovers Bootstrap Iterator arraylist java

score 1 · Accepted Answer

Here is a simple example of how you can do it. What you should do basically is to incorporate an image into the content before making the query. Then once the result is obtained or when you think it is correct to eliminate it, you must clean the content of "edit-content" and load the new information. In the following example I use a timmer to simulate the query and the response obtained after 5 seconds. You should move those lines of code to the Success of your query. Greetings!

$('#detalles-modalE').on('show.bs.modal', function(e) {

var $modal = $(this);
//-> aqui llamo a mis variables ->//
// antes de realizar la consulta cargamos nuestro gif
let imgUrl= "https://media.giphy.com/media/y1ZBcOGOOtlpC/200.gif";
$('.edit-content').html('<img src="'+imgUrl+'" alt="cargando">');
//
/*$.ajax({
 cache: false,
 type: 'POST',
 url: 'miurl',
 data: '',
 success: function(data) {
  $modal.find('.edit-content').html(data);
 } 
}) */

// vamos a simular una demora de 5 segundo y una respuesta de nuestra consulta. Esto lo deberias hacer en el SUCCESS.

setTimeout(function(){ 
//Limpiamos el contenido de "edit-content" eliminando la imangen antes de cargar los nuevos datos
$('.edit-content').html('');
}, 5000);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#detalles-modalE">
  Launch demo modal
</button>
 <div id="detalles-modalE" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Detalle de Pedido.-</h4>
        </div>
        <div class="modal-body edit-content"></div>
    </div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>