How to put a loader in ajax requests?

Question

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(), }); }); });

Do you mean show a loading notification?

Jared Smith
– Jared Smith

2022-09-12 00:24:40 +00:00
Commented Sep 12, 2022 at 0:24 — Jared Smith
– Jared Smith, Commented Sep 12, 2022 at 0:24
Yes, i want to show a notification loading

Snorlax
– Snorlax

2022-09-12 00:25:26 +00:00
Commented Sep 12, 2022 at 0:25 — Snorlax
– Snorlax, Commented Sep 12, 2022 at 0:25

Krunal Bhimajiyani · Accepted Answer · 2022-09-14 09:30:57Z

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(); } }); }); });

Fadi Hania · Accepted Answer · 2022-09-12 00:27:15Z

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 });

Thank you for the reply, I appreciate it very much. But I'm a newbie and don't know exactly how to use the code in your answer with mine. I'm sorry, but could you give some additional details? I would be grateful. Thanks again.
Just add the always() function after your ajax() call and use to hide loader

Collectives™ on Stack Overflow

How to put a loader in ajax requests?

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related