How to add a ” waiting” icon for an ajax in WP frontend?

4 comments

1. You can use the inbuilt spinner class :

   Add the class to the HTML where you want the spinner to appear, for example after your search button :

   <button type="button" id="searchsubmit">Search Button</button>
   <span class="spinner"></span> <!-- Add this spinner class where you want it to appear--> 
   

   In jQuery you should add the is-active class to the spinner immediately after the click event; then in your ajax post response you remove the is-active class :

   jQuery(document).ready(function($) {
   
       $('#searchsubmit').click(function(e){ 
   
           e.preventDefault();
   
            $(".spinner").addClass("is-active"); // add the spinner is-active class before the Ajax posting 
   
           $.post(
               WPaAjax.ajaxurl,
               {
                   action : 'your_action',
                   data : data
               },
               function( response ) {
   
                    $(".spinner").removeClass("is-active"); // remove the class after the data has been posted 
   
               }
           );
       });
   
   });
   

   Hope that helps. See more from WordPress core docs

2. jQuery(document).ready(function($) {
   
       $('#searchsubmit').click(function(e){ 
           e.preventDefault();
   
           var $button = $(this);
           $button.addClass('disabled').after('<div class="load-spinner"><img src="http://domain.com/path/to/image.gif" /></div>');
   
           var searchval = $('#s').val(); // get search term
   
           $.post(
               WPaAjax.ajaxurl,
               {
                   action : 'wpa56343_more',
                   searchval : searchval
               },
               function( response ) {
                   $('#results').empty();
                   $('#results').append( response );
   
                   $button.removeClass('disabled');
                   $('.load-spinner').remove();
               }
           );
       });
   
   });
   

3. jQuery(document).ready(function($){
   
       $('#searchsubmit').click(function(e){ 
           e.preventDefault();
           var self = $( this );
   
           var loaderContainer = $( '<span/>', {
               'class': 'loader-image-container'
           }).insertAfter( self );
   
           var loader = $( '<img/>', {
               src: GET_YOUR_BASE_URL + '/wp-admin/images/loading.gif',
               'class': 'loader-image'
           }).appendTo( loaderContainer );
   
   
           var searchval = $('#s').val(); // get search term
   
           $.post(
               WPaAjax.ajaxurl,
               {
                   action : 'wpa56343_more',
                   searchval : searchval
               },
               function( response ) {
                   $('#results').empty();
                   $('#results').append( response );
                   loaderContainer.remove();
               }
           );
       });
   });
   

   All you have to do now is get the beginning path of the url to wp-admin and the code should work. Hope this helps.

4. $(function($)
   {
       $("#btnSubmit").click(function () 
       {
           
           //Set the Valid Flag to True if one RadioButton from the Group of RadioButtons is checked.
           var isValid = $("input[name=gender]").is(":checked");   
           //Display error message if no RadioButton is checked.
           $("#spnError")[0].style.display = isValid ? "none" : "block";
       }),
   
       $('#contact_form').validate(
       {
           rules:
           {
               uname:
               {
                   required:true,
                   minlength:3,
                   maxlength:15
               },
               uemail:
               {
                   required:true,
                   email: true,
                   minlength:3,                    
               },
               upass:
               {
                   required:true,
                   minlength:3,
                   maxlength:15
               },
               cpass:
               {
                   required:true,
                   equalTo:'#inputpassword'
               },
               uaddres:
               {
                   required:true,
                   minlength:3,
                   maxlength:100
               },
               gender:
               {
                   required:true
               },
               ucity:
               {
                   required:true,
                   minlength:2,
                   maxlength:15
               },
               ustate:
               {
                   required:true
               },
               uzip:
               {
                   required:true,
                   minlength:6,
                   maxlength:6 
               }
           
           },
           messages:
           {
               gender:
               {
                   required:''
               }
           },
           submitHandler:function(form)
           {
               event.preventDefault();
   
               var nameid  = $("#inputname").val();
               var emailid = $("#inputemail").val();               
               var passid = $("#inputpassword").val();
               var addid = $("#inputaddress").val();
               var genderid=$('#inputgender[name="gender"]:checked').val();
               var cityid = $("#inputcity").val();
               var stateid = $("#inputstate").val();
               var zipid = $("#inputzip").val();
   
               var link="<?php echo admin_url('admin-ajax.php'); ?>"
               var form_data=$('#contact_form');
               
               $.ajax({
                       url: link,
                       type: 'post',
                       data: 
                       {
                           action:'contact_form_data',
                           data:form_data.serialize()
                       },
                       beforeSend:function()
                       {
                               $('.loader').show();
                       },
                       success: function (response) 
                       {
                           msg="<div>"+response+"</div>";
                           $('#msg').html(msg);
   
                           console.log(response);
                           $("#contact_form")[0].reset();
                           $('.loader').hide();
                       }
                   });
   
           }
   
       });
   });
   

Comments are closed.