Cum să adaugi o pictogramă "în așteptare" pentru Ajax în interfața WordPress?

Puteți folosi clasa încorporată spinner:

Adăugați clasa în HTML unde doriți să apară spinner-ul, de exemplu după butonul de căutare:

<button type="button" id="searchsubmit">Buton Căutare</button>
<span class="spinner"></span> <!-- Adăugați această clasă spinner unde doriți să apară-->

În jQuery ar trebui să adăugați clasa is-active spinner-ului imediat după evenimentul de click; apoi în răspunsul post-ului ajax eliminați clasa is-active:

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

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

        e.preventDefault();

         $(".spinner").addClass("is-active"); // adăugați clasa is-active spinner înainte de postarea Ajax

        $.post(
            WPaAjax.ajaxurl,
            {
                action : 'your_action',
                data : data
            },
            function( response ) {

                 $(".spinner").removeClass("is-active"); // eliminați clasa după ce datele au fost postate

            }
        );
    });

});

Sper că acest lucru vă ajută. Aflați mai multe din documentația WordPress core

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" alt="Indicator de încărcare" title="Se încarcă rezultatele..." /></div>');

        var searchval = $('#s').val(); // obține termenul de căutare

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

                $button.removeClass('disabled');
                $('.load-spinner').remove();
            }
        );
    });

});

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(); // obține termenul de căutare

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

Tot ce trebuie să faci acum este să obții calea de bază a URL-ului către wp-admin și codul ar trebui să funcționeze. Sper că acest lucru te ajută.

$(function($)
{
    $("#btnSubmit").click(function () 
    {
        //Setează flag-ul isValid pe True dacă un RadioButton din grupul de RadioButtons este bifat.
        var isValid = $("input[name=gender]").is(":checked");   
        //Afișează mesajul de eroare dacă niciun RadioButton nu este bifat.
        $("#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();
                    }
                });

        }

    });
});