不能AJAXify功能搜索

Question

改編this Railscast在我的應用我的節目頁面上工作，搜索工作正常，但它不是瞬間（也沒有，古怪的，是它的keyup，但它確實在提交工作，我以爲我沒有編碼）。

正如我在下面的更新中提到的，當我嘗試通過向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 

Javascript角/ posts.js.coffee

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

的routes.rb

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

編輯 - 當我將「remote：true」添加到我的form_tag時，搜索將完全停止工作。如在中，它既不搜索密鑰也不提交。有趣的是，我的網絡（在檢查員中）似乎在每當（並且僅當）我按下提交時才發出GET請求。這個請求包括我的搜索詞，例如，當我在帖子的頁面上稱爲「這是一個非常長的帖子名稱」（帶有slu url的url）並且搜索「long」時，請求是這樣的：

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

該URL實際上並不在地址欄顯示出來，但它的存在在網絡請求。

編輯 - 按照Paulo的建議移動遙控器：在我的form_tag中正確的位置。所以：

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

再次，有遠程：真正停止搜索功能一般。當我檢查該元素，我得到這個：

<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"> 

「這 - 是 - 一 - 真的 - 長後標題」是在那裏我在進行搜索頁面上的文章的標題。這也是網址中的slu g。因此，我認爲，這個問題可能是我在這個標籤中打電話的行爲。「/帖」建議，但）我進行的表演，而不是索引頁這個搜索，和b）當我嘗試「/帖」，產生這種形式的標籤：

<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，並在路徑中使用@post，我得到這種行爲怪異的組合：

• 雖然我的javascript當我提交搜索時，不再有任何與提交相關的任何操作，該頁面將完全重新加載並執行正確的搜索。
• 當我只需鍵入，Firebug控制檯顯示了每個按鍵發射的請求（這是有道理的，因爲我的JS），但什麼也沒有發生實際的頁面上。

再一次，當我添加remote：true時，頁面上根本沒有任何反應。

編輯 - 如果我刪除posts.js.coffee的內容，搜索執行完全相同。和in一樣，如果在form_tag中沒有remote：true，但只有在按下提交時纔有效。爲什麼它忽略了.js.coffee文件中發生了什麼？

編輯迴應JVNILL的回答

我替換posts.js.coffee代碼與jvnill建議什麼。現在搜索功能根本不起作用，但似乎這是因爲javascript中的搜索函數沒有做到這一點，導致preventDefault調用似乎正在工作，並且當我搜索時（這裏是「真「），瀏覽器似乎是送我的按鍵爲PARAMS：

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) 

Answer 1

我不完全確定，如果我正確理解你，但使用原始設置，你有工作搜索權嗎？你只是想通過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按鍵或用來觀察變化像delayedObserver搜索欄的插件。您還需要注意何時提交表單並使用ajax而不是正常表單提交

UPDATE：剛剛注意到日誌顯示您要進行索引操作，它實際上是呈現一個html模板，這意味着您沒有js模板。所以請將show.js.erb複製到index.js.erb。

更新：編輯索引操作。您需要添加的另一件事是在respond_to塊內部的format.js行，所以它不會默認爲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 

Answer 2

添加遠程選項，您的form_tag。檢查docs。

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

使用Firebug檢查，如果產生的形式有數據刪除標籤爲真。