2

ajaxスピナーの表示に問題があります。現在localhost:3000/test、次のコードを使用してこれをテストしています。

リンクをクリックしてローダーを表示させます（Ruby on Railsコード）：

<li><%= link_to "New Test", new_test_path, :remote => true %></li>

ローダーがdiv内部に表示されるはずです：

<div id="generate-add-form">
  <div class="ajax-loader"></div>
</div>

次に、それを表示するための私の関数：

jQuery( function($) {

$('#generate-add-form').ajaxStart( function() {
    $(this).children('.ajax-loader').show();
});

$('#generate-add-form').ajaxStop( function() {
    $(this).children('.ajax-loader').hide();
});

});

最後は私のCSSです（必要かどうかを確認するためにコメントアウトされたものもあります）：

.ajax-loader {
 display:    none;
 /*position:   fixed;*/
 z-index:    1000;
 /*top:        -13em;
 left:       6em;*/
 background:url('ajax-loader.gif') 50% 50% no-repeat;
}
body.loading {
 overflow: hidden;
}
body.loading .ajax-loader {
 display: block;
}

表示されないリンクをクリックするとどうしてですか？

編集：

<li><%= link_to "Test", new_test_path, :class => "add-link", :remote => true %></li>
<li><%= link_to "Study Guide", new_study_guide_path, :class => "add-link", :remote => true %></li>

$('#generate-add-form').children('.ajax-loader').hide();
  $('.add-link').click( function() {
    $('#generate-add-form').children('.ajax-loader').show();
});

最初にスピナーを非表示にしてから、クリックすると再び表示します。別のリンクに切り替えるときの間にはどうですか？

4

2 に答える 2

4

さて、まず、何かを非表示にして、ajaxローダーを表示します。まず、リンクにIDまたは一意のクラスを指定して、リンクをターゲットにできるようにします。

<%= link_to "New Test", new_test_path, :remote => true, :id => 'you_link_id' %>

次に、リンクのクリックを処理するJavaScriptを追加します。

$('#your_link_id').click(function(){
  $('#generate-add-form').children('.ajax-loader').show();
  $('#id_of_the_stuff_you_want_to_hide').hide();
});

new_test_pathに応答するコントローラーアクションで、最後にこれを追加します。

respond_to do |format|
  format.js
end

ここでは、コントローラーアクションをjavascriptリクエストに応答させています（これはリモートが行うことです）。format.htmlHTMLリクエストに応答するために追加することもできます。javascriptが無効になっているユーザー（全ユーザーの1〜2％）にもページを提供したい場合は、おそらくこれを行うことをお勧めします。

次に、という名前でビューを作成しますyour_action.js.erb。通常のhtmlの代わりにjsに注意してください。内部では、ajaxスピナーを非表示にして、好きなものを表示できます。そのページで定義されたパーシャルをレンダリングすることもできます。

$('#generate-add-form').children('.ajax-loader').hide();
$('#id_of_the_stuff_you_now_want_to_show').show();
$("#div_containing_your_partial").html('<%= escape_javascript(render 'name_of_your_partial') %>');

必要に応じて、これを行う方法を示す、少し前に作成したこのリポジトリのクローンを作成します。

そして最後に、これを機能させるときは、表示と非表示をよりきれいな方法で作成する方法を検討することをお勧めします。たとえば、showの代わりにfadeInを使用し、hideの代わりにfadeOutを使用してみてください。

また、最後の詳細。jQueryでは、関数は順番に呼び出されません。それらはすべて同時に呼び出されます。したがって、何かが消えた後にのみ何かを表示させたい場合は、コールバックを使用する必要があります。次に例を示します。

# without a callback, both actions take place at the same time
$("#id").hide();
$("#id2").show();

# with a callback, show will only be called after hide ends
$("#id").hide(function(){
  $("#id2").show();
});

編集：あなたが望むことをするために、:remote => trueあなたはあなたのリンクの部分を削除し、基本的にRailsがあなたのためにすでに自動的に行うことをプログラムしなければなりません。次のリンクを使用して、自分自身をガイドしてください。

そして、これはおそらくあなたが探しているものです：

しかし、これはすべてかなり複雑で、特にRailsbeginnerの場合：/

于 2012-06-16T15:57:28.027 に答える
1

にゼロ以外を設定してみてheightください.ajax-loader。

于 2012-06-16T12:33:55.630 に答える