Preloader with Materialize

Asked

Viewed 435 times

2

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 sending the form I leave set $('#loader').hide();, action it to submit the form and after sending, on the request page I bring a script:

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

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

javascript ajax materialize

  • I don’t quite understand what you tried to do... It’s not that it’s not working, it’s the way you used it, you put it to display the Loader in the ajax Success, then as the request occurs right it will display the Loader according to your code, then in place of the show() puts hide() and vice versa, or if you think it best to use the beforeSend: $('loader').show(), and within the success puts $('loader').hide()

  • @Maxrogério, what I’m trying to do is, when sending the form, the preloader is triggered and after the arrival of the data on the page it disappears. Therefore, when submitting the Seto form as $('loader').show() and in the file that processes in the database and returns to the page where the form is placed $('loader').hide(), but it doesn’t work...

  • So by submitting the form, he will sue the ajax, and you add the beforeSend : $('#loader').show(), that will open the Download at the time of the request, on success you have hidden the loading, because you already have the callback function, IE, your request has already been processed and on success you take the data from the callback.

1 answer

4


Try it this way:

Displays your Download with the beforeSend: and removes it as the 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();
    }
  });

Browser other questions tagged javascript ajax materialize

You are not signed in. Login or sign up in order to post.