web-dev-qa-db-fra.com

Comment ajouter une icône "en attente" pour un ajax dans WP l'extrémité avant?

Voici mon code de recherche pour le traitement de la recherche:

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

});

Ma question est de savoir comment ajouter une icône d’attente (celle utilisée dans WP admin) près du bouton de recherche (#searchsubmit) afin que l’utilisateur sache après le clic que cela fonctionne? Le mieux serait que j'utilise javasccript uniquement dans mon code js existant que j'ai posté ici.

jquerytemplatesajax
1
Derfder
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
Jake
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();
            }
        );
    });
});

Tout ce que vous avez à faire maintenant est d’obtenir le chemin de début de l’url de wp-admin et le code devrait fonctionner. J'espère que cela t'aides.

1
kkemple