0

私はフォームを持っており、このフォームが AJAX 経由で送信されると、ajax-loader の画像を表示し、リクエストが完了すると、2 秒でこのローダーを非表示にしたいと考えています。残念ながら、実際には ajax-loader は常に 0.5 秒でしか表示されません (私の見積もりです)。奇妙なことに、CSS クラスtransparentは 2 秒で非表示になりますが、イメージ ローダーは非表示になります。

私は重要なことを見落としていますか？画像ローダーが 2 秒で非表示にならず、0.5 秒で非表示になるのはなぜですか?

update_page.html.haml

  %h1 Update
= render :partial => 'update_it'

_update_it.html.haml

%section#update_it
  = form_for(@user, :remote => true, :html => {:class => 'form-horizontal'}) do |f|
    ...
    = submit_tag 'Save changes', :id => 'update_information'

update.js.haml

$('#update_it').html("#{escape_javascript(render(:partial => 'update_it'))}");
setTimeout(function() {
  $('section#update_it').removeClass('transparent')
} , 2000);

script.js

$(document).ready(function(){
  $("#update_information").click(function(){
    $('section#update_it').addClass('transparent');
    $('.transparent').append('<img src="/assets/ajax-loader.gif" alt="" id="loader" class="loader" />');
  });
});

EDITまだ1つ忘れていました.SUBMITボタンを初めてクリックするとCSSクラスが使用されtransparentますが、2回目にボタンをクリックすると、まだそうではありません。なんで？どうしたの？

4

1 に答える 1

4

率直で申し訳ありませんが、単純なことを複雑にしていると思います。

ajaxStart() などの jQuery の ajax コールバック関数を使用して、「ajax ローダー」を再実装してみてください。(参照: http://api.jquery.com/ajaxStart/ )

ajax が終了したら、"success" や "complete" などの別のコールバック関数を使用して ajax-loader を置き換えます。( http://api.jquery.com/jQuery.ajax/を参照)

于 2012-04-05T22:42:11.563 に答える