6

This is my search js code for processing search :

jQuery(document).ready(function($){

    $('#searchsubmit').click(function(e){ 
        e.preventDefault();

        var searchval = $('#s').val(); // get search term

        $.post(
            WPaAjax.ajaxurl,
            {
                action : 'wpa56343_more',
                searchval : searchval
            },
            function( response ) {
                $('#results').empty();
                $('#results').append( response );
            }
        );
    });

});

My question is how to add an icon of waiting (the one that is used in WP admin) near the search button (#searchsubmit) so the user knows after the click that it's working? The best would be if I use only javasccript inside my existing js code I have posted here.

1
  • Just a suggestion: But you could change the css background of the search button to be the spinning ajax circle. That image is a gif and located somewhere in wp-includes/. Possibly with .addClass() or .css()
    – Vigs
    Jul 16, 2013 at 15:32

4 Answers 4

8

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

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

});
2
  • 6
    Small hint. WordPress have since 4.2 a spinner inside the core, include the class spinner. Examples here and background here.
    – bueltge
    Jun 24, 2015 at 9:36
  • There have been spinners in core a lot longer than that. They are very useful.
    – Jake
    Jun 24, 2015 at 16:06
2
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.

1
  • 2
    Small hint. WordPress have since 4.2 a spinner inside the core, include the class spinner. Examples here and background here.
    – bueltge
    Jun 24, 2015 at 9:36
0
$(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();
                    }
                });

        }

    });
});
2
  • 1
    I guess the only relevant bit here is the $('.loader').show(); and $('.loader').hide();? The rest looks like an entirely different form from the question. Where does the loader element come from?
    – Rup
    Jun 10, 2021 at 14:53
  • 1
    As Rup mentioned, the relationship between the question and this code is unclear - if it is indeed an answer to the question, a few sentences describing how this code addresses the question could go a long way! There's a lot of good tips on what goes in to a good answer in our help center
    – bosco
    Jun 11, 2021 at 5:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.