Question 36689 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to put a loader in ajax requests? – Jquery

One is a small code that allows me to view error messages when the form fields are empty or when everything is fine. What I would like to do is enter a loader or text to indicate that the submitted action is being processed. I really don’t know where to start, can someone help me understand how to achieve this?

jQuery(document).ready(function($) {
    
    $('.mts-edit-account').on('submit', function(e) {
        e.preventDefault();

    //Ajax Handling Error
        var $form = $(this);
        jQuery.post(
      $form.attr('action'), 
      $form.serialize(), 
      function(data) {
        jQuery('.newdiv').html(data);
          }, 'json',
      
    );

    //Ajax function
    jQuery.ajax({
      type: "post",
      data: jQuery(".mts-edit-account").serialize(),
    }); 
    });
});
Tags:

2

Answers


  1. 0

    AJAX requests using jQuery allows you to handle request completion, failure or success using the returned value from ajax() function. In your case you need to start by showing the loader before starting the request, then hide on completion. To do that, you can use always() function. That will make sure it’s always called in case of success or failure.

    // Show loader
jQuery.ajax({
    // ..
}).always(() => {
    // Hide loader
});
    Login or Signup to reply.
  2. 0

    Firstly put the loader in your HTML file where you want to display it. i.e: below the submit button

       <img 
        src="https://thumbs.gfycat.com/PessimisticGlamorousDunnart-size_restricted.gif" 
        class="loader" 
        alt="Loader"
        height=25 
        width=25 
    >

    Then add CSS for this loader:

      .loader{
      display:none;
   }

    Then put the below code in jQuery:

        jQuery(document).ready(function($) {
        $('.mts-edit-account').on('submit', function(e) {
          e.preventDefault();
          $.ajax({
            type: "POST",
            url: "your_url",
            data: $(".mts-edit-account").serialize(),
            beforeSend: function() {
               $(".loader").show();
            },
            success: function(msg) {
              $(".loader").hide();
            }
          });
        });
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search