2

私は jQuery を使用して CodeIgniter で Web アプリに取り組んでおり、ajax 呼び出し中に ajax 読み込みイメージを表示する JavaScript 関数を作成しようとしています。私の例では、ajax呼び出しは成功していますが、ロードは表示されないため、問題は「when」の最初の関数が実行されていないことだと思います。誰かがこれで私を助けることができますか? ありがとう

http://jsfiddle.net/fEnPz/8/

HTML

<div id="form"></div>​

CSS

#form {
  height: 300px;
  width: 350px;
}

.loadingOverlay {
  border: 1px solid #EFEFEF;
  background-color: #D8DCDF;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: absolute;
  padding: 10px;
  z-index: 1;
  -moz-opacity: 0.50;
  opacity: 0.50;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
}​

Javascript

function displayLoading(Container, Callback) {
    var height = Container.height();
    var width = Container.width();
    $.when(function() {
      Container.append('<div class="loadingOverlay" style="width: '+ width +'px; height: '+ height +'px;"><img class="ajaxLoading" src="http://www.ajaxload.info/images/exemples/2.gif" /></div>');
      Container.find(".loadingOverlay").position({
          "my": "center center",
          "at": "center center",
          "of": Container
      });
      Container.find(".ajaxLoading").position({
          "my": "center center",
          "at": "center center",
          "of": Container
      });
    }, Callback()).then(function() {
      Container.find(".loadingOverlay").hide().remove();
    });
}

displayLoading($("#form"), function() {
    $.ajax({
      url: 'http://search.twitter.com/search.json',
      dataType: 'jsonp',
      data: {
            q: 'ConceptionAb6'
      },
      success: function(results) {
        // Only for testing the loading
        setTimeout(function() {
          alert(results.max_id);
        }, 2000);
      },
      error: function() {
        alert("error!");
      }
    });
});
4

4 に答える 4

1

私の意見では、複数の非同期リクエストを使用する場合は、$。whenがより一般的です。あなたの場合、私は以下を使用します：

$.ajax({
    beforeSend: function() {
        var Container = $("#form");
        var height = Container.height();
        var width = Container.width();
        Container.append('<div class="loadingOverlay" style="width: '+ width +'px; height: '+ height +'px;"><img class="ajaxLoading" src="/img/ajax-loader.gif" /></div>');
        Container.find(".loadingOverlay").position({
            "my": "center center",
            "at": "center center",
            "of": Container
        });
        Container.find(".ajaxLoading").position({
            "my": "center center",
            "at": "center center",
            "of": Container
        });
    },
    url: 'http://search.twitter.com/search.json',
    dataType: 'jsonp',
    data: {
        q: 'ConceptionAb6'
    },
    success: function(results) {
        alert(results.max_id);
    },
    error: function() {
        alert("error!");
    },
    complete: function() {
        $("#form").find(".loadingOverlay").hide().remove();
    }
});
​
于 2012-12-28T02:35:55.760 に答える
1

displayLoading()私が得る骨まで剥ぎ取ります...

function displayLoading(Container, Callback) {
    ...
    $.when(function(){...}, Callback()).then(function() {
        ...
    });
}

$.when()...それが正しく使用されていないことを明らかにします。

$.when()すべての引数がpromiseであると期待しますが、どちらの引数にも当てはまりません。

  • 最初の引数：呼び出されることのない関数。
  • 2番目の引数：呼び出されたがpromiseを返さない関数。

さらに、$.when()1つのpromise（$ .ajax（）によって返されるjqXHR）のみが含まれるため、不要です。

私はあなたが望むパターンはこのようなものだと思います：

function displayLoading(container, promise) {
    //create a spinner in container if not already created
    //show spinner
    //hide other content
    promise.done(function() {
        //hide spinner
        //show other content
    });
}

displayLoading($("#form"), $.ajax({
    //ajax options
});
于 2012-12-28T02:38:45.527 に答える
1

問題は、ajax 呼び出しが関数にラップされているようです。これはうまくいきます：

function displayLoading(Container, Callback) {
    var height = Container.height();
    var width = Container.width();

      Container.append('<div class="loadingOverlay" style="width: '+ width +'px; height: '+ height +'px;"><img class="ajaxLoading" src="/img/ajax-loader.gif" /></div>');
      Container.find(".loadingOverlay").position({
          "my": "center center",
          "at": "center center",
          "of": Container
      });
      Container.find(".ajaxLoading").position({
          "my": "center center",
          "at": "center center",
          "of": Container
      });

    $.when($.ajax({
      url: 'http://search.twitter.com/search.json',
      dataType: 'jsonp',
      data: {
            q: 'ConceptionAb6'
      },
      success: function(results) {
        setTimeout(function() {
          alert(results.max_id);
        }, 2000);
      },
      error: function() {
        alert("error!");
      }
    })).then(function() {
      Container.find(".loadingOverlay").hide().remove();
    });
}

displayLoading($("#form"));
​

遅延オブジェクトが jQuery でどのように機能するかを調べて、別のアプローチを見つけました。http://colonelpanic.net/2011/11/jquery-deferred-objects/

于 2012-12-28T02:27:12.983 に答える