0

検索用のフォームがあります。このフォームは「AJAX 化」されており、うまく機能しています。今、次のようにスピナー機能を追加しようとしています:

index.html.haml

#spinner{:style => 'display: none;'} LOADING...  
= render 'articles/show_data'

search.js.erb

$("#search_form")
    .bind("ajax:beforeSend", function(){
      alert('xx');
      //$("#spinner").show();
    })
    .bind("ajax:complete", function(){
      $("#spinner").hide();
    })
$('.show_articles').html("<%= escape_javascript(render(partial: '/articles/show_data')) %>");

データは正しく印刷されますが、フォームを送信するとスピナーが表示されないという問題があります。(フォームの ID 要素は実際にはsearch_formと呼ばれます)

スピナーを表示および非表示にするコードはどこに配置する必要がありますか? AJAX（上記のスニッパー）を介してデータがレンダリングされるJSファイルにも別のファイルを入れようとしましたが、どれもうまくいきませんでした。

jQuery 1.9 を使用しています。

これを手伝ってくれてありがとう。ありがとう

4

3 に答える 3

1

コメント者へ: を使用しても問題はありません.js.erb。ただし、OPは明らかに、リクエスト/レスポンスの概念にどのように適合するかを理解していません。

フォームが送信されると、Rails はその送信をコントローラーとアクションにルーティングします。次に、コントローラーアクションはそれが行うことを何でも行い、応答しsearch.js.erb、ブラウザーはこれを受け取ったときにこれを javascript として実行します。したがって、これは、フォームが送信されるまでフック#search_formについて通知しないことを意味します。beforeSend

TLDR; $('#search_form')..コードを、ページと共に読み込まれる JS アセット ファイルに移動します。

ああ、実際にスピナーを表示している行のコメントを外してください...

ああ、最後に、AJAX スピナーに関する約 400 万のページ/投稿があります。

于 2013-03-25T16:16:41.550 に答える
0

これを 2 時間以内に修正できなかったため、次の方法でこの問題を解決しました。

custom_js.js

$(document).ready(function() {
  $("#form_submit_input").click(function(){
    $('#spinner').show();
  });
});

これにより、フォームが送信されたときにスピナーが表示されます。

その後、search.js.erbで

$('.show_articles').html("<%= escape_javascript(render(partial: '/articles/show_data')) %>");
$('#spinner').hide();

データベースからのコンテンツがいつレンダリングされるか、スピナーを非表示にします。おそらくスピナーを処理する最もクリーンな方法ではありませんが、実用的なソリューションです。

于 2013-03-25T17:19:05.543 に答える
0

あなたのフォームには、ありますremote: trueか？beforeSend ではなく ajax:before を試してください:

$("#search_form")
.bind("ajax:before", function(){
  alert('xx');
  //$("#spinner").show();
})
...

それは私にとってはうまくいきます。

于 2013-03-25T16:13:40.297 に答える