1

このRailscastをアプリのショーページで機能するように調整しましたが、検索は正常に機能していますが、すぐには機能しません（また、奇妙なことに、キーアップでは機能しますが、コード化していないと思っていた送信では機能します） 。

以下の更新で述べたように、form_tag（RailsCastからの逸脱）に「remote：true」を追加して問題を修正しようとすると、検索が完全に機能しなくなります。何が起こっているのか分かりますか？

index.html.erb

<%= form_tag @post, :method => 'get', :id => "posts_search", class: "search_form squeeze form-inline" do %>
  <p>
    <%= text_field_tag :search, params[:search], 
    placeholder: "Search titles:", id: "search_field" %>
    <%= submit_tag "Search", name: nil, class: "btn squeeze search" %>
  </p>
  <div id="list"><%= render 'search' %></div>
<% end %>

_search.html.erb

<ul class="blog_links">
<% @posts.first(@link_num).each do |p| %>
    <li class="total_hover">
        <%= p.name %>
    </li>
<% end %>
</ul>

index.js.erb

$("#list").html("<%= escape_javascript(render("search")) %>");

posts_controller.rb

  def index
    @posts = Post.search(params[:search]).reverse

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @posts }
    end
  end



 def search
    @posts = Post.search(params[:search]).reverse
    render json: { results: @posts }
 end

post.rb

  def self.search(search)
    if search
      where('name LIKE ?', "%#{search}%")
    else
      scoped
    end
  end

javascripts / posts.js.coffee

$ -> 
  $("#posts_search input").keyup ->
    $.get $("#posts_search").attr("action"), $("#posts_search").serialize(), null, "script"
    false

ルート.rb

match '/search', to: 'posts#search'

編集-form_tagに「remote：true」を追加すると、検索が完全に機能しなくなります。のように、キーアップ時も送信時も検索しません。

ただし、興味深いことに、（インスペクター内の）私のネットワークは、送信を押すたびに（そしてそのときのみ）GET要求を行っているようです。そのリクエストには検索用語が含まれているため、たとえば、「これは非常に長い投稿名です」という投稿のページにいて、「長い」検索を行った場合、リクエストは次のようになります。

http://localhost:3000/posts/this-is-a-really-long-post-title?utf8=%E2%9C%93&search=long

そのURLは実際にはURLバーに表示されませんが、ネットワークリクエストには表示されます。

編集-私のform_tagの正しい場所にremote：trueを移動するというPauloの提案に従いました。それで：

<%= form_tag @post, remote: true, method: 'get', id: "posts_search", class: "search_form squeeze form-inline" do %>

繰り返しになりますが、remote：trueを指定すると、一般に検索機能が停止します。その要素を調べると、次のようになります。

<form accept-charset="UTF-8" action="/posts/this-is-a-really-long-post-title" class="search_form squeeze form-inline" data-remote="true" id="posts_search" method="get">

「this-is-a-really-long-post-title」は、私が検索しているページの投稿のタイトルです。これは、URLのスラッグでもあります。したがって、問題はこのタグで呼び出しているアクションにあるのではないかと思います。「/posts」が提案されましたが、a）インデックスページではなく、ショーでこの検索を実行しています。b）このフォームタグを生成する「/posts」を試してみると次のようになります。

<form accept-charset="UTF-8" action="/posts" class="search_form squeeze form-inline" data-remote="true" id="posts_search" method="get">

検索を押すと（コンソールインスペクターで）このエラーが発生します（検索ボックスに入力するたびに同様のエラーが発生するため、キーアップが機能します）。

GET http://localhost:3000/posts?utf8=%E2%9C%93&search= 404 (Not Found) jquery.js:8476
 send jquery.js:8476
 jQuery.extend.ajax jquery.js:7931
 $.rails.rails.ajax jquery_ujs.js:110
 $.rails.rails.handleRemote jquery_ujs.js:175
 (anonymous function) jquery_ujs.js:392
 jQuery.event.dispatch jquery.js:3046
 elemData.handle jquery.js:2722

編集-Railscastのようにremote：trueを削除し、パスで@postを使用すると、次のような奇妙な動作の組み合わせが得られます。

  • 私のJavaScriptにはフォームの送信に関連するアクションがありませんが、検索を送信すると、検索が実行されて正しく表示された状態でページが完全に再読み込みされます。
  • 入力するだけで、Firebugコンソールはキーを押すたびにリクエストが発生することを示します（これは私のJSを考えると理にかなっています）が、実際のページでは何も起こりません。

繰り返しますが、remote：trueを追加すると、ページには何も起こりません。

編集-posts.js.coffeeの内容を削除すると、検索はまったく同じように実行されます。のように、form_tagにremote：trueがない場合に機能しますが、送信を押した場合にのみ機能します。その.js.coffeeファイルで何が起こっているのかを無視するのはなぜですか？

JVNILLの回答に応じて編集する

私はposts.js.coffeeのコードをjvnillが提案したものに置き換えました。現在、検索はまったく機能していませんが、これはjavascriptで検索関数が呼び出された結果であるようです。これは、preventDefault呼び出しが機能しているように見えるため、検索すると（ここでは、本当に"）、ブラウザはパラメータとして私のキー押下を送信しているようです：

Started GET "/archive?utf8=%E2%9C%93&search=rea&_=1362073395037" for 127.0.0.1 at 2013-02-28 09:43:17 -0800
Processing by PostsController#index as JS
  Parameters: {"utf8"=>"✓", "search"=>"rea", "_"=>"1362073395037"}
  Post Load (0.2ms)  SELECT "posts".* FROM "posts" WHERE (name LIKE '%rea%')
  Rendered posts/_search.html.erb (0.5ms)
  Rendered posts/index.html.erb within layouts/application (1.8ms)
  Rendered layouts/_shim.html.erb (0.0ms)
  Rendered layouts/_header.html.erb (0.5ms)
Completed 200 OK in 23ms (Views: 21.5ms | ActiveRecord: 0.2ms)


Started GET "/archive?utf8=%E2%9C%93&search=real&_=1362073395038" for 127.0.0.1 at 2013-02-28 09:43:17 -0800
Processing by PostsController#index as JS
  Parameters: {"utf8"=>"✓", "search"=>"real", "_"=>"1362073395038"}
  Post Load (0.1ms)  SELECT "posts".* FROM "posts" WHERE (name LIKE '%real%')
  Rendered posts/_search.html.erb (0.6ms)
  Rendered posts/index.html.erb within layouts/application (1.9ms)
  Rendered layouts/_shim.html.erb (0.0ms)
  Rendered layouts/_header.html.erb (0.4ms)
Completed 200 OK in 50ms (Views: 49.2ms | ActiveRecord: 0.1ms)


Started GET "/archive?utf8=%E2%9C%93&search=real&_=1362073395039" for 127.0.0.1 at 2013-02-28 09:43:17 -0800
Processing by PostsController#index as JS
  Parameters: {"utf8"=>"✓", "search"=>"real", "_"=>"1362073395039"}
  Post Load (0.1ms)  SELECT "posts".* FROM "posts" WHERE (name LIKE '%real%')
  Rendered posts/_search.html.erb (0.6ms)
  Rendered posts/index.html.erb within layouts/application (2.0ms)
  Rendered layouts/_shim.html.erb (0.0ms)
  Rendered layouts/_header.html.erb (0.5ms)
Completed 200 OK in 17ms (Views: 16.1ms | ActiveRecord: 0.1ms)


Started GET "/archive?utf8=%E2%9C%93&search=reall&_=1362073395040" for 127.0.0.1 at 2013-02-28 09:43:17 -0800
Processing by PostsController#index as JS
  Parameters: {"utf8"=>"✓", "search"=>"reall", "_"=>"1362073395040"}
  Post Load (0.2ms)  SELECT "posts".* FROM "posts" WHERE (name LIKE '%reall%')
  Rendered posts/_search.html.erb (0.5ms)
  Rendered posts/index.html.erb within layouts/application (1.8ms)
  Rendered layouts/_shim.html.erb (0.0ms)
  Rendered layouts/_header.html.erb (0.4ms)
Completed 200 OK in 16ms (Views: 15.2ms | ActiveRecord: 0.2ms)


Started GET "/archive?utf8=%E2%9C%93&search=reall&_=1362073395041" for 127.0.0.1 at 2013-02-28 09:43:17 -0800
Processing by PostsController#index as JS
  Parameters: {"utf8"=>"✓", "search"=>"reall", "_"=>"1362073395041"}
  Post Load (0.2ms)  SELECT "posts".* FROM "posts" WHERE (name LIKE '%reall%')
  Rendered posts/_search.html.erb (0.6ms)
4

2 に答える 2

3

私があなたを正しく理解しているかどうかは完全にはわかりませんが、元の設定で、検索は正しく機能していますか？ajax経由でフォームを送信したいだけですか？さらに、検索応答が遅れていますか？次のコードでこれらの問題の両方が修正されることを願っています

@search = ->
  $.get $('#posts_search').attr("action"), $("#posts_search").serialize(), null, "script"

$ ->
  $('#posts_search input').keypress -> search()

  $('#posts_search').submit (e) ->
    e.preventDefault()
    search()

keyupの代わりにkeypressを使用するか、delayedObserverのような検索フィールドへの変更を監視するプラグインを使用できます。また、フォームがいつ送信されるかを観察し、通常のフォーム送信の代わりにajaxを使用する必要があります

更新：ログにインデックスアクションが実行されていることが示され、実際にはhtmlテンプレートがレンダリングされていることに気づきました。これは、jsテンプレートがないことを意味します。にコピーshow.js.erbしindex.js.erbます。

更新：インデックスアクションの編集。追加する必要があるもう1つのことはformat.js、respond_toブロック内の行であるため、デフォルトではhtmlになりません。

def index
  @posts = Post.search(params[:search]).reverse

  respond_to do |format|
    format.html # index.html.erb
    format.json { render json: @posts }
    format.js
  end
end
于 2013-02-28T08:58:09.667 に答える
0

form_tag に remote オプションを追加します。ドキュメントを確認してください。

<%= form_tag('/posts', :remote => true) %>
# => <form action="/posts" method="post" data-remote="true">

firebug を使用して、生成されたフォームに data-remove タグが true に設定されているかどうかを調べます。

于 2013-02-23T09:26:54.737 に答える