How to make a Loading when calling a page with ajax?

Question

How to make a Loading when calling a page with ajax?

Navigation

#1 by (2 votes)

0

Well it happens that I want to add a gif Loading and run every time I click on the link, after a certain time I load the page, the gif should be centered and add a kind of dark background to the whole body , I'm using codeigniter, please help me ..

var ajax_loader = '<div class="container"><img src="<?php echo base_url() ?>assets/template/imagen/ajax-loader.gif" alt=""></div>';
base_url = $('#base_url').val();
$(document).ready(function() {
  $("a#direccion1").on("click", function() {
    $("#mostrarPagina").html(ajax_loader).fadeIn(5000).load(base_url + "mantenimiento/logistica/listatrabajador");
    $("li#lista1").addClass("active");
    $("li#lista2").removeClass("active");
    $("li#lista3").removeClass("active");
    $("li#lista4").removeClass("active");
    $("li#lista5").removeClass("active");
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="container" id="mostrarPagina">
    <!--aqui cargara la pagina-->
    div para todas las paginas..
  </div>
</body>

</html>

javascript html5 php ajax

asked by RCA 08.05.2018 в 19:02

source

1 answer

Extract value from a div tag TypeError, I can not map json to model. Angular 4

score 2 · Answer 1

how are you?

I give you an example that I just put together in a Code Pen, in this case I used a rest api service to take the data externally.

If you have any questions, please let me know:

link

$(document).on('click', 'header nav ul li a', function(e){
    
  // evito comportamiento de link
  e.preventDefault();
  
  // tomo json a solicitar
  var jsonGet = $(this).attr('href');
  
  $.ajax({
    url : 'https://jsonplaceholder.typicode.com/' + jsonGet,
    method : 'get',
    beforeSend : function(){
      // utilizo before Send para activar el loader ya que se ejecuta antes de la petición
      $('.loader').show();
      
       // limpio contenedor de resultados
      $('.result .content').html('');
      
    }
  }).done(function(result){
    
    // esto se ejecuta cuando el request del json fue exitoso
    // imprimo los resultados
    
     // si quieres que el loader se vea un poco más, puedes encerrar todo esto en un setTimout();, peor no es necesario
    
    setTimeout(function(){
      $('.result .content').html(JSON.stringify(result));
    
      // ahora escondo el loader
      $('.loader').hide();   
    }, 1500);
    
  })
  
})

.result{
  position: relative;
  min-height: 300px;
  background: #eee;
}
.loader{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*yo usaré background blanco porque mi gif es blanco*/
  background: #fff;
  display: none;
}
.loader img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <ul>
      <li><a href="posts">Get Posts</a></li>
      <li><a href="comments">Get Comments</a></li>
    </ul>
  </nav>
</header>
<div class="result">
  <div class="content">
    Aquí se cargará tu contenido dinámico.
  </div>
  <div class="loader">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
  </div>
</div>

Greetings!