Question

我正在尝试在rails 3中完成observe_field。

在rails 2.3.5中，我有： -

 <%= observe_field 'query',  :frequency => 2,
                            :update => "search_results",                                
                            :url => {:controller => params[:area], :action => "search",:area =>  params[:area]},
                            :method=>:get,
                            :with => "query" %>

哪个工作正常，检查我的text_field_tag“查询”并每两秒更新一次“search_results”。这就是我试图用原型模拟的。

目前我在Rails 3的基本应用程序中： -

<script>
document.observe("dom:loaded", function() { 
$('search').observe('change', 
respondToChange());
});
</script>

或

<script>
document.observe("dom:loaded", function() {
new Form.Element.Observer(
'search',
1, 
respondToChange()
) });
</script>

当页面加载时，两者都触发respondToChange函数，尽管“dom：loaded”，然后不再观察。

有没有人知道如何在我的“搜索”text_field_tag上获得重复的观察员检查。

Answer 1

感谢“以太人”和“agnaki”在以太的某处，我解决了这个问题：

使用respondToChange，而不是respondToChange()

当括号（）执行函数时，而没有（）则引用它。

$('search').observe('change', respondToChange);
 // only triggers when the focus is moved away from the text_field.

new Form.Element.Observer(
  'search',
  1,
respondToChange
) }); 

//................................repeatedly checks the text_field,every 1 second, and call the function if there is a any change.

Answer 2

如果有人有兴趣，这是我的完整代码。此代码每2秒观察text_field_tag“搜索”，如果值发生更改，则会自动触发搜索。我认为现在可以取消提交按钮。我可能会在text_field_tag中添加:autocomplete => "off", :onKeyPress=>"return disableEnterKey(event)") %>来禁用返回键，但不确定。

在我的index.html.erb中，我有：

<h1>Listing homepages</h1>
<div id = "testsearch">
   <%=render :partial => 'homepage'%>     
</div>
<%= form_tag homepages_path, :method => 'get', :remote => true do %>
<%= label_tag(:search, "Search for:") %> 
<%= text_field_tag :search, params[:search]%>
<%= submit_tag "search", :name => nil %>
<%end%>

<%= set_focus_to_id 'search' %>               // I have a helper "set_focus_to_id"

<script>
document.observe("dom:loaded", function() {   // ensures the page is loaded first
new Form.Element.Observer(                    // Observes the text_field_tag every 2 seconds
  'search',
  2, 
  respondToChange                         //refrences the function in the Layout <head> 
)                                         // on a change in search calls respondToChange
});
</script>
<br />
<%= link_to 'New Homepage', new_homepage_path %>

在我的应用程序布局头我有：

<script>
function respondToChange() {
$('search').up('form').submit()            // The ".up finds the form in the DOM"
};
</script

在我的控制器#index中我有：

 def index
  @homepages = Homepage.search(params[:search]) //".search method is in the Model"
  respond_to do |format|
   format.html # index.html.erb
   format.xml  { render :xml => @homepages }
   format.js
 end
end

在我的模型中我有：

def self.search(search_item)
   if search_item
    self.where('section LIKE ?', "%#{search_item}%")    //Handles the ajax call.
   else
    self.all                                            //Handles the html call on startup.
   end
end

在帮手中我有：

def set_focus_to_id(id)
  javascript_tag("$('#{id}').focus()");
end

在“_homepage”部分我有：

<table>
  <tr>
    <th>Id</th>
    <th>Section</th>
    <th>Link</th>
    <th>Description</th>
    <th></th>
    <th></th>
    <th></th>
 </tr>

<% for homepage in @homepages %>

  <tr>
    <td><%= homepage.id %></td>
    <td><%= homepage.section %></td>
    <td><%= homepage.link %></td>
    <td><%= homepage.description %></td>
    <td><%= link_to 'Show', homepage %></td>
    <td><%= link_to 'Edit', edit_homepage_path(homepage) %></td>
    <td><%= link_to 'Destroy', homepage, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<%end%>

</table>

在index.js.erb中我有：

$('testsearch').update("<%= escape_javascript(render :partial => 'homepage') %>");

如果有人对如何改进这一点有任何意见，请与我联系或说出来。

Answer 3

我想我现在已经解决了通过编程进行ajax调用的问题。我将不得不在所有类型的浏览器中查看它，但目前它在Firefox和Safari中工作。我现在还将javascript“document.observe（”dom：loaded“和它调用的函数”responseToChange（）“移动到带有content_for的应用程序头。所有其他文件保持不变。

在我的index.html.erb中，我现在有： -

<h1>Listing homepages</h1>
<div id = "testsearch">
     <%=render :partial => 'homepage'%>     
</div>
<%= form_tag homepages_path, :method => 'get', :remote => true do %>
    <%= label_tag(:search, "Search for:") %> 
<%= text_field_tag :search, params[:search]%>
 <%= submit_tag "search", :name => nil %>
<%end%>

<%= set_focus_to_id 'search' %>               

<% content_for :search_javascript do %>

function respondToChange() {

    var pars = 'search=' + $('search').getValue()

        new Ajax.Request("<%= homepages_path %>" ,{
        method: 'get',
        parameters: pars
    }); 
};

document.observe("dom:loaded", function() {   
    new Form.Element.Observer(                
      'search',
      2, 
      respondToChange

    )                                         
});

<% end %>

<br />
<%= link_to 'New Homepage', new_homepage_path %>

在我的应用程序布局文件中，我现在有： - GardenR3 ＆lt;％= stylesheet_link_tag：all％＆gt; ＆lt;％= javascript_include_tag：默认值％＆gt; ＆lt;％= csrf_meta_tag％＆gt;

<script>
 <%= yield :search_javascript %>
</script>

</head>
<body>

<%= yield %>

</body>
</html>

Rails 3中的Observe_field

3 个答案: