Preloader with Materialize

Question

Preloader with Materialize

Navigation

#1 by (4 votes)

3

I'm making a request via ajax:

$(function () {
    $('#loader').hide();
    $('#formSend').on('submit', function (e) {      
      e.preventDefault();
      $.ajax({
        type: 'post',
        url: 'proc_pedidos.php',
        data: $('form').serialize(),
        success: function (result) {
          $('#result_produtos').html(result);
          $('#loader').show();
        }
      });
    });
  });

Before submitting the form I set it to $('#loader').hide(); , I activate it by submitting the form and after sending it, on the request page I have a script:

<script>
    $('#loader').hide();
</script>

But this is not working. The preloader loads, but in the back the script does not hide it.

javascript ajax materialize

asked by anonymous 28.07.2017 / 04:34

1 answer

Reusability of Control SELECT Union ALL Dismiss Arguments

score 4 · Accepted Answer

Try this:

Displays your loader with beforeSend: and removes it as complete:

$.ajax({
    type: 'post',
    url: 'proc_pedidos.php',
    data: $('form').serialize(),
    success: function (result) {
       $('#result_produtos').html(result);
    },
    beforeSend: function(){

      $('#loader').show();
    },
    complete: function(){
       $('#loader').hide();
    }
  });