Come aggiungere un'icona di "attesa" per una chiamata ajax nel frontend di WordPress?

Question

Come aggiungere un'icona di "attesa" per una chiamata ajax nel frontend di WordPress?

16 lug 2013, 18:22:17

Visualizzazioni: 23.9K

Voti: 6

Questo è il mio codice JavaScript per elaborare la ricerca:

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

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

        var searchval = $('#s').val(); // ottieni il termine di ricerca

        // Aggiungi la classe spinner prima della chiamata ajax
        $('#searchsubmit').addClass('is-busy');

        $.post(
            WPaAjax.ajaxurl,
            {
                action : 'wpa56343_more',
                searchval : searchval
            },
            function( response ) {
                $('#results').empty();
                $('#results').append( response );
                // Rimuovi la classe spinner dopo aver ricevuto la risposta
                $('#searchsubmit').removeClass('is-busy');
            }
        );
    });

});

La mia domanda è come aggiungere un'icona di attesa (quella utilizzata nella dashboard di WordPress) vicino al pulsante di ricerca (#searchsubmit) in modo che l'utente sappia dopo il click che sta funzionando? Sarebbe preferibile utilizzare solo JavaScript all'interno del codice JS esistente che ho pubblicato qui.

Derfder

2.08K

jquery template ajax

Commenti

Solo un suggerimento: Potresti cambiare il background css del pulsante di ricerca con il cerchio di caricamento ajax. Quell'immagine è un gif e si trova da qualche parte in wp-includes/. Possibilmente usando .addClass() o .css()

Vigs

16 lug 2013 18:32:35

Tutte le risposte alla domanda

Commenti

Quello spinner non è disponibile nel frontend, viene iniettato solo nel CSS dell'amministrazione.

User

26 nov 2022 05:48:38

Commenti

Piccolo suggerimento. WordPress include dal 4.2 uno spinner nel core, basta includere la classe spinner. Esempi qui e sfondo qui.

bueltge

24 giu 2015 12:36:29

Gli spinner sono presenti nel core da molto più tempo. Sono molto utili.

Jake

24 giu 2015 19:06:45

@Jake/@bueltge giusto, ma mai nel front end (non di default). Quegli script/stili sono solo nell'area amministrativa

User

26 nov 2022 05:48:31

Commenti

Piccolo suggerimento. WordPress ha dalla versione 4.2 uno spinner integrato nel core, basta includere la classe spinner. Esempi qui e sfondo qui.

bueltge

24 giu 2015 12:36:36

Commenti

Immagino che l'unica parte rilevante qui sia $('.loader').show(); e $('.loader').hide();? Il resto sembra essere un form completamente diverso dalla domanda. Da dove viene l'elemento loader?

Rup

10 giu 2021 17:53:48

Come ha menzionato Rup, la relazione tra la domanda e questo codice non è chiara - se è effettivamente una risposta alla domanda, qualche frase che descriva come questo codice affronta la domanda potrebbe essere molto utile! Ci sono molti buoni consigli su cosa rende una buona risposta nel nostro [aiuto]

bosco

11 giu 2021 08:42:51

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

Puoi utilizzare la classe spinner integrata:

Aggiungi la classe all'HTML dove vuoi che appaia lo spinner, ad esempio dopo il tuo pulsante di ricerca:

<button type="button" id="searchsubmit">Pulsante di ricerca</button>
<span class="spinner"></span> <!-- Aggiungi questa classe spinner dove vuoi che appaia -->

In jQuery dovresti aggiungere la classe is-active allo spinner immediatamente dopo l'evento click; poi nella risposta del post ajax rimuovi la classe is-active:

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

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

        e.preventDefault();

         $(".spinner").addClass("is-active"); // aggiungi la classe is-active allo spinner prima dell'invio Ajax 

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

                 $(".spinner").removeClass("is-active"); // rimuovi la classe dopo l'invio dei dati 

            }
        );
    });

});

Spero sia utile. Vedi altro dalla documentazione di WordPress core

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="Caricamento in corso" title="Caricamento in corso" /></div>');

        var searchval = $('#s').val(); // ottiene il termine di ricerca

        $.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 lug 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(); // ottiene il termine di ricerca

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

Tutto ciò che devi fare ora è ottenere il percorso iniziale dell'URL verso wp-admin e il codice dovrebbe funzionare. Spero che questo ti aiuti.

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

$(function($)
{
    $("#btnSubmit").click(function () 
    {
        //Imposta il flag di validità a True se un RadioButton del gruppo è selezionato
        var isValid = $("input[name=gender]").is(":checked");   
        //Mostra il messaggio di errore se nessun RadioButton è selezionato
        $("#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();
                    }
                });

        }

    });
});