jquery - ボタンを mvc の読み込みアイコンに置き換えます

Question

私はasp.net MVC4を使用しており、jqueryとasp.net mvcの投稿の両方を介して、かなりの量のクライアントとサーバー側のやり取りを行っています。

これをトリガーするためにクリックされるボタンがページにあります。ユーザーがボタンをクリックしたときにボタンを読み込み中のアイコンに簡単に変え、サーバーの処理が完了すると通常の状態に戻ることはできますか?

Answer 1

Demo Fiddle

That would be very simple to do,

$('#btnSubmit').click(function(){
             $(this).attr('disabled','disabled');
             $('#yourLoadingImage').show();


           $.ajax({
             url: "test.html",
                }).done(function() {
                   $(this).attr('disabled','');
                   $('#yourLoadingImage').hide();
            });

       });

You just need to place your image properly.

Answer 2

                $.ajax({
        type:'POST',
        url:'',
        data:'variable='+searchword,
                    complete:function(){
                       // here before server procceses
                    }
        success:function(data){
               //when proccesing completed
            }
        }

Answer 3

もちろん。ボタンの横に隠れた「ロードアイコン」があります。ボタンの onclick 関数を使用して、ボタンを非表示にし、読み込み中のアイコンを表示します。サーバーからのコールバックで読み込みアイコンを非表示にし、ボタンを表示します。簡単すぎる。

Answer 4

できることは、ボタンを無効にして、span/div の横に読み込み中の画像を表示することです。次に、ajax 呼び出しを行い、アクション メソッド (ajax コールバック メソッド内) から応答を取得したら、応答を確認し、進行状況の画像を非表示にして、ボタンを有効に変更します。

<input type="button" value="Save" id="btnSave" class="normal" />
<div id="progress" style="display:none;"></div>

あなたのJavaScriptは

$(function(){

  $("#btnSave").click(function(e){    
    e.preventDefault();

    var _this=$(this);

    //Let's disable the button to avoid duplicate posting
     _this.attr('disabled', 'disabled');

    //show the loading image
    $("#progress").html("<img src='PathToSomeLoadingImage.gif' />").show();

    //now make your ajax call
    $.post("@Url.Action("Check","User")",function(data){

       //check the response and enable the button
       _this.removeAttr("disabled", "disabled");

       //hide the progress bar div
       $("#progress").hide();

    }); 

  }); 

});