¿Cómo agregar un ícono de "espera" para una llamada ajax en el frontend de WordPress?

Question

¿Cómo agregar un ícono de "espera" para una llamada ajax en el frontend de WordPress?

16 jul 2013, 18:22:17

Vistas: 23.9K

Votos: 6

Este es mi código js para procesar la búsqueda:

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

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

        var searchval = $('#s').val(); // obtener término de búsqueda

        // Agregar el ícono de carga antes de la petición ajax
        $('#searchsubmit').after('<span class="spinner is-active"></span>');

        $.post(
            WPaAjax.ajaxurl,
            {
                action : 'wpa56343_more', 
                searchval : searchval
            },
            function( response ) {
                $('#results').empty();
                $('#results').append( response );
                // Remover el ícono de carga cuando la petición se complete
                $('.spinner').remove();
            }
        );
    });

});

Mi pregunta es cómo agregar un ícono de espera (el que se usa en el panel de administración de WP) cerca del botón de búsqueda (#searchsubmit) para que el usuario sepa después del clic que está funcionando. Lo mejor sería si uso solo javascript dentro de mi código js existente que he publicado aquí.

Derfder

2.08K

jquery plantillas ajax

Comentarios

Solo una sugerencia: Podrías cambiar el fondo CSS del botón de búsqueda para que sea el círculo giratorio de AJAX. Esa imagen es un GIF y está ubicada en algún lugar dentro de wp-includes/. Posiblemente usando .addClass() o .css()

Vigs

16 jul 2013 18:32:35

Todas las respuestas a la pregunta

Comentarios

Ese spinner no está disponible en el frontend, solo se inyecta en el CSS del administrador.

User

26 nov 2022 05:48:38

Comentarios

Pequeña pista. WordPress tiene desde la versión 4.2 un spinner integrado en el núcleo, incluye la clase spinner. Ejemplos aquí y contexto aquí.

bueltge

24 jun 2015 12:36:29

Los spinners han estado en el núcleo desde mucho antes. Son muy útiles.

Jake

24 jun 2015 19:06:45

@Jake/@bueltge cierto, pero nunca en el front-end (no por defecto). Esos scripts/estilos solo están en el área de administración

User

26 nov 2022 05:48:31

Comentarios

Pequeña sugerencia. WordPress tiene desde la versión 4.2 un spinner integrado en el núcleo, incluye la clase spinner. Ejemplos aquí y antecedentes aquí.

bueltge

24 jun 2015 12:36:36

Comentarios

Supongo que la única parte relevante aquí es $('.loader').show(); y $('.loader').hide();? El resto parece ser un formulario completamente diferente al de la pregunta. ¿De dónde viene el elemento loader?

Rup

10 jun 2021 17:53:48

Como mencionó Rup, la relación entre la pregunta y este código no está clara. Si realmente es una respuesta a la pregunta, un par de oraciones que describan cómo este código aborda la pregunta podrían ser de gran ayuda. Hay muchos buenos consejos sobre qué incluye una buena respuesta en nuestra [ayuda]

bosco

11 jun 2021 08:42:51

NJENGAH 379 · Answer 1 · 2019-07-15T18:59:29Z

Puedes utilizar la clase spinner incorporada:

Añade la clase al HTML donde quieras que aparezca el spinner, por ejemplo después de tu botón de búsqueda:

<button type="button" id="searchsubmit">Botón de búsqueda</button>
<span class="spinner"></span> <!-- Añade esta clase spinner donde quieras que aparezca-->

En jQuery deberías añadir la clase is-active al spinner inmediatamente después del evento click; luego en la respuesta de tu post ajax eliminas la clase is-active:

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

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

        e.preventDefault();

         $(".spinner").addClass("is-active"); // añade la clase is-active al spinner antes del post Ajax 

        $.post(
            WPaAjax.ajaxurl,
            {
                action : 'tu_accion',
                data : datos
            },
            function( respuesta ) {

                 $(".spinner").removeClass("is-active"); // elimina la clase después de enviar los datos 

            }
        );
    });

});

Espero que esto ayude. Ver más en la documentación principal de WordPress

Jake 1.82K · Answer 2 · 2013-07-16T19:08:38Z

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="Cargando resultados de búsqueda" title="Cargando..." /></div>');

        var searchval = $('#s').val(); // obtiene el término de búsqueda

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

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

});

Jake

1.82K

16 jul 2013 19:08:38

kkemple 141 · Answer 3 · 2013-07-16T19:08:46Z

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(); // obtiene el término de búsqueda

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

Todo lo que tienes que hacer ahora es obtener la ruta base de la URL hacia wp-admin y el código debería funcionar. Espero que esto te ayude.

Mahesh Barot 1 · Answer 4 · 2021-06-10T12:56:49Z

$(function($)
{
    $("#btnSubmit").click(function () 
    {
        // Establecer la bandera de validación a Verdadero si un RadioButton del grupo está seleccionado
        var isValid = $("input[name=gender]").is(":checked");   
        // Mostrar mensaje de error si ningún RadioButton está seleccionado
        $("#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();
                    }
                });

        }

    });
});