0

これは私の側の基本的なエラーに違いないと確信していますが、完全に見落としています。

レコードを編集するためのフォームを表示するために使用するjQuery UIダイアログがあります..htmlの下部（それ自体はajax経由でロードされます）には、（アニメーション化されたロードgif）を含むdivがあります。読み込み中の div は、html の読み込み後に非表示になります。

CSS は、div を右下隅の絶対位置に配置します。

ダイアログの [保存] ボタンをクリックすると、ajax 経由で情報を保存する関数が呼び出されます。私が持っているajax呼び出しで：

beforeSend: function() {
              $("#ajaxLoading").show();
        },
  complete: function() {
              $("#ajaxLoading").hide();
        }

問題は、画像が表示されないことです。

最初のダイアログの読み込み後に hide() を削除すると、gif がずっと表示されます。

beforeSend ではなく、ajax 呼び出しの直前に show() を配置しようとしましたが、まだ何もありません。

ダイアログのセットアップに show() を入れてみました - 「保存」ボタンをクリックしてください。何もない。

Chrome を使用してスクリプトにブレークポイントを設定し、ステップスルーすると、GIF が表示されます。だから、私は show() .. の後に数秒のタイムアウトを入れてみましたが、まだ何もありません。

何を試すべきか、これ以上のアイデアはありません。

4

5 に答える 5

1

これが役立つことを願っています

私は同じ問題を抱えていて、それがどのように起こっているのか本当にわかりませんが、次のようなコードの小さな遅延を使用して修正できます.

ソリューション 1

$.ajax({
  method: "GET",
  url: "/",
  beforeSend:function(){
    $("#ajaxLoading").show(1);
    // please note i have added a delay of 1 millisecond , which runs almost same as code with no delay.
  },
  complete:function(data){
    $("#ajaxLoading").hide();
    //here i write success code
  }

});

ソリューション 2

   $.ajax({
      method: "GET",
      url: "/",
      beforeSend:function(){

        setTimeout(function(){
           $(".loader-image").show();
        }, 1);
        // please note i have added a delay of 1 millisecond with js timeout function which runs almost same as code with no delay.
      },
      complete:function(data){
        $(".loader-image").hide();
        //here i write success code
      }

    });
于 2015-11-15T09:29:15.087 に答える
0

これを使って。

jQuery.ajax({
    data: 'your data',
    url: 'your url',                      
    type: "POST",
    dataType: "html",
    async:false,
    onLoading:jQuery("#ajaxLoading").html('<img src="http://example.com/images/spinner.gif" />').show(),
    success: function(data){ 
        jQuery("#ajaxLoading").fadeOut();
    }
});
于 2013-05-29T08:36:41.957 に答える
0

次のように、ローダー gif を html として追加します。

beforeSend: function() {
              $("#ajaxLoading").html('<img src="image source" />');
        },
  complete: function() {
              $("#ajaxLoading").html('')
        }
于 2016-04-26T11:22:38.137 に答える
0

細かいスクリプトの使い方と操作方法は...

$("#save_button").click(function () {
    // start showing loading...        
    $("#ajaxLoading").show();

    // make an ajax call
    $.ajax({
        type: 'POST',
        url: url,
        data: $("#form").serialize(),
        success: function() {
            // when success, hide loading.
            $("#ajaxLoading").hide();

            // your additional scripts
            if( a == null ){
                // some script          
            }
            else{
                // some script
            }
        }
    });
于 2013-05-29T09:21:27.193 に答える