将此 Railscast改编为在我的应用程序中的显示页面上工作,搜索工作正常,但它不是即时的(奇怪的是,它在 keyup 上,虽然它在提交时工作,我以为我没有编码) .
正如我在下面的更新中提到的,当我尝试通过将“remote:true”添加到 form_tag(与 RailsCast 的偏差)来解决问题时,搜索完全停止运行。知道发生了什么吗?
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")) %>");
post_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”时,搜索完全停止工作。如在,它既不搜索 keyup 也不搜索提交。
不过,有趣的是,我的网络(在检查器中)似乎在我按下提交时(且仅在)时发出 GET 请求。该请求包括我的搜索词,因此,例如,当我在名为“这是一个非常长的帖子名称”(带有 slugged url)的帖子页面上搜索“long”时,请求是这样的:
http://localhost:3000/posts/this-is-a-really-long-post-title?utf8=%E2%9C%93&search=long
该 URL 实际上并未显示在 URL 栏中,但它存在于网络请求中。
编辑——按照 Paulo 的建议将 remote:true 移动到我的 form_tag 中的正确位置。所以:
<%= 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 中的 slug。因此,我认为问题可能是我在此标签中调用的操作。建议使用“/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">
当我按搜索时(在我在搜索框中键入时出现类似的错误,因此 keyup 正在工作),我收到此错误(在控制台检查器中)。
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 的回答
我用 jvnill 建议的内容替换了 posts.js.coffee 中的代码。现在搜索根本不起作用,但似乎这是在 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)