Wie fügt man ein “Warten” -Symbol für einen Ajax im WP-Frontend hinzu?

Dies ist mein Such-JS-Code für die Verarbeitung der Suche:

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

Meine Frage ist, wie man ein Symbol des Wartens (das, das in WP Admin verwendet wird) in der Nähe der Suchschaltfläche (#searchsubmit) hinzufügen, damit der Benutzer nach dem Klick weiß, dass es funktioniert? Am besten wäre es, wenn ich nur javascript in meinem bestehenden js-Code verwende, den ich hier gepostet habe.

Solutions Collecting From Web of "Wie fügt man ein “Warten” -Symbol für einen Ajax im WP-Frontend hinzu?"

 jQuery(document).ready(function($) { $('#searchsubmit').click(function(e){ e.preventDefault(); var $button = $(this); $button.addClass('disabled').after('
'); 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(); } ); }); });
 jQuery(document).ready(function($){ $('#searchsubmit').click(function(e){ e.preventDefault(); var self = $( this ); var loaderContainer = $( '', { 'class': 'loader-image-container' }).insertAfter( self ); var loader = $( '', { 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(); } ); }); }); 

Alles, was Sie jetzt tun müssen, ist den Anfangspfad der URL zu wp-admin zu bekommen und der Code sollte funktionieren. Hoffe das hilft.