我正在把我的脚趾浸入Rails3 / JQuery / unobtrusive javascript中。我已经编写了一个玩具应用程序,可以在禁用JS的情况下完成我想要的任何操作,现在我想引入javascript,这样服务器就不必在每次交易时都刷新整个页面。
这是用于创建新玩具的NON-JS Controller / View环境:
class ToysController < ApplicationController
...
def new
@toys = Toy.all
@toy = Toy.new
respond_to do |format|
format.html # new.html.erb
end
end
# ==========
# file: views/toys/index.html.erb
<%= render :partial => 'list', :locals => {:toys => @toys, :target => nil} %>
<%= link_to 'New Toy', new_toy_path, :class => 'new' %>
# ==========
# file: views/toys/new.html.erb
<%= render :partial => 'list', :locals => {:dj_monitors => @toys, :target => @toy} %>
# ==========
# file: views/toys/_list.html.erb
<div class='table-div'>
<div class='body-div'>
<% toys.each do |t| %>
<%= render :partial => 'toy', :locals => {:toy => t} %>
<% end %>
<% if target && target.new_record? %>
<%= render :partial => 'form', :locals => {:toy => target} %>
<% end %>
</div>
</div>
(原谅任何明显的复杂性,但所有_list.html.erb都会列出所有现有玩具,如果:target引用新记录,则在列表末尾呈现_form部分。)
# ==========
# file: views/toys/_form.html.erb
<%= form_for(toy) do |f| %>
<div class='column selected'><%= f.number_field :sku %></div>
<div class='column selected'><%= f.text_field :description %></div>
<div class='column selected'>
<%= link_to 'Cancel', toys_path %>
<%= f.submit %>
</div>
<% end %>
我想在启用javascript的版本中点击“新玩具”链接(在index.html.erb中)提交一个XMLHttpRequest,它只返回表单部分,就地呈现。该表格的发布将是标准的远程=&gt;真正的交易。
但我无法弄清楚如何让服务器只返回表单。我将ToysController的新方法修改为:
def new
@toys = Toy.all
@toy = Toy.new
respond_to do |format|
format.html # new.html.erb
format.js { render :partial => 'form', :locals => {:toy => @toy} }
end
end
...并启用:remote =&gt; index.html.erb视图中[New Toy]链接中的true选项:
<%= link_to 'New Toy', new_toy_path, :class => 'new', :remote => true %>
现在我的代理网络调试器看到GET /toys/new HTTP/1.1
X-Requested-With: XMLHttpRequest
(看起来正确),但回复是HTTP/1.1 304 Not Modified
为什么不渲染_form.html.erb?
有两个问题 - @Robin解决了主要问题。另一部分是我得到了一个“304 Not Modified”响应 - 它在技术上是正确的,因为服务器已经发送了表单 - 但调试很困难。
因此,如果您正在尝试调试javascript / ajax代码,它可以帮助您在控制器中调用'expires_now'来强制服务器在您调试时重新发送页面,如下所示: / p>
def new
@toy = Toy.new
expires_now
respond_to do |format|
format.html ...
format.js ....
end
end
答案 0 :(得分:0)
def new
@toy = Toy.new
respond_to do |format|
format.html { @toys = Toy.all } #you only need to get all toys in this case (and you should add pagination)
format.js
end
end
in new.js.erb
$("#some_div").append("<%= escape_javascript(render "toys/form", :toy => @toy) %>")
如果您自己提出请求,则需要在format.js
中呈现部分:
$.ajax({
success: function(data) {
$("#some_div").append(data);
}
})