2010-07-30 69 views
0

我想讓搜索字段在用戶開始輸入時開始輸出結果。觀察字段沒有做任何事

這是我的看法:

<%= observe_field 'keyword', 
     :url => { :action=> 'search_results' }, 
     :frequency => 0.5, 
     :update => 'results', 
     :loading => "$('.spinner').show()", 
     :complete => visual_effect(:slide_down, "results", :duration => 0.9), 
     :with => 'keyword' %> 


     <%= form_remote_tag :url =>{ :action => :search_results }, 
     :update => "results", 
     :loading => "$('.spinner').show()", 
     :complete => visual_effect(:slide_down, "results", :duration => 0.9) %> 



        <fieldset> 
         <legend>Tutor Search.</legend> 
         <label for="searchItField">Keyword Search.</label> 

         <%= text_field_tag(:keyword) %> 
         <span id="Submit_search"> 

         <span id="Submit_search_hover"><%= submit_tag "Search", :name => nil %></span> 

         </span> 
        </fieldset> 
     </form> 

<div id="results"> 
    <img class="spinner" id="ajax_spinner" src="../images/ajax-loader.gif" alt="Comment being processed" style="display: none" /> 
</div> 

在我的控制器是這樣的:

def search_results 
     keyword = params[:keyword] 
     @tutors = Tutors.find(:all,:conditions => ["category LIKE ?", '%' + keyword + '%'])  
    end 

現在,如果你去http://avandata.net/tutor/tutors/search,然後在搜索欄中鍵入數學,然後點擊提交它的工作原理。但是,觀察字段在輸入時不會執行任何操作。我一直試圖弄清楚這一點。

這是我的開發日誌的樣子。

Here is my log/development Processing TutorsController#search (for 98.254.132.228 at 2010-07-30 09:29:52) [GET] Rendering tutors/search Completed in 5ms (View: 3, DB: 0) | 200 OK [avandata.net/tutor/tutors/search] 

而對於提交搜索按鈕,它看起來像這樣在日誌中:

Processing TutorsController#search_results (for 98.254.132.228 at 2010-07-30 13:28:22) [POST] 
    Parameters: {"authenticity_token"=>"KNsIfr69fDTVGEZnwQoyXhnnuK5ZP6QIwq/zHRVYWqQ=", "keyword"=>"math"} 
    [4;36;1mTutors Load (0.1ms)[0m [0;1mSELECT * FROM `tutors` WHERE (category LIKE '%math%') [0m 
Rendering tutors/search_results 
    [4;35;1mTutors Columns (3.4ms)[0m [0mSHOW FIELDS FROM `tutors`[0m 
Completed in 8ms (View: 2, DB: 4) | 200 OK [http://avandata.net/tutor/tutors/search_results] 

回答

0

我發現問題在於觀察字段必須在文本字段之後。就是這樣。見下文。

<%= form_remote_tag :url =>{ :action => :search_results }, 
    :update => "results", 
    :loading => "$('.spinner').show()", 
    :complete => visual_effect(:slide_down, "results", :duration => 0.9) %> 



       <fieldset> 
        <legend>Tutor Search.</legend> 
        <label for="searchItField">Keyword Search.</label> 

        <%= text_field_tag(:keyword) %> 
        <span id="Submit_search"> 

        <span id="Submit_search_hover"><%= submit_tag "Search", :name => nil %></span> 

        </span> 
       </fieldset> 
    </form> 

    <%= observe_field 'keyword', 
     :url => { :action=> 'search_results' }, 
     :frequency => 0.5, 
     :update => 'results', 
     :loading => "$('.spinner').show()", 
     :complete => visual_effect(:slide_down, "results", :duration => 0.9), 
     :with => 'keyword' %> 
0

如果你看螢火蟲在該頁面,你會只要你將鼠標懸停在看到一個Javascript錯誤發生文本域。所以這就是爲什麼它不適合你。至於導致錯誤的原因尚不清楚。

我確實注意到頁面加載的JQuery庫相當老舊(1.2.6)。我會建議更新您的支持JQuery庫至少包含在JQuery存儲庫中的版本here

如果這樣不能解決您的問題,那麼我會建議重新考慮您完全使用JRails。我一直認爲這是一個毫無意義的項目 - 克隆RJS接口,但基於JQuery而不是Prototype。我的意見認爲,儘管它在社區似乎沒有太多的牽引力,所以有人擔心未來的支持。

如果您喜歡RJS,那麼只需使用Rails自帶的默認值即可。如果你喜歡那樣的話,他們會很好的工作。如果你喜歡JQuery,那麼直接使用它。這是一個很棒的圖書館,使用起來非常直觀。在你花在看這個不工作的時候,你可能會在JQuery中編寫一個等效的功能版本幾次。

+0

你知道,如果有一個簡單的方法來恢復到protoype – Alex 2010-07-30 22:05:30

+0

@Alex我相信,你只需要更換jQuery和jrails JavaScript和這包括在佈局(或網頁)'<%= javascript_include_tag :默認%>' – bjg 2010-07-30 22:29:15