web-dev-qa-db-ja.com

Ajaxの「待機中」アイコンをに追加する方法 WP フロントエンド？

これは検索を処理するための私の検索JSコードです：

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

});

私の質問は、検索ボタン（#searchsubmit）の近くに待機アイコン（WP adminで使用されているアイコン）を追加する方法です。私がここに投稿した私の既存のjsコードの中にjavasccriptだけを使用するのが最善です。

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

組み込みのスピナークラスを使用できます。

検索ボタンの後に、スピナーを表示するHTMLにクラスを追加します。

<button type="button" id="searchsubmit">Search Button</button>
<span class="spinner"></span> <!-- Add this spinner class where you want it to appear-->

JQueryでは、クリックイベントの直後にis-activeクラスをスピナーに追加する必要があります。次に、ajaxポストレスポンスでis-activeクラスを削除します：

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

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

        e.preventDefault();

         $(".spinner").addClass("is-active"); // add the spinner is-active class before the Ajax posting 

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

                 $(".spinner").removeClass("is-active"); // remove the class after the data has been posted 

            }
        );
    });

});

それが役に立てば幸いです。 詳細 from WordPressコアドキュメント

1
NJENGAH
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();
            }
        );
    });
});

あなたが今しなければならないのは、wp-adminへのURLの開始パスを取得することだけで、コードは機能するはずです。お役に立てれば。

1
kkemple