【问题标题】:Rails 3 AJAX problem - UJSRails 3 AJAX 问题 - UJS
【发布时间】:2011-09-13 17:01:36
【问题描述】:

好的,这就是我的设置,我认为我已经正确设置了所有内容,但由于某种原因,页面没有显示 AJAX 响应。

基本上,我有一个成员列表,并希望在同一页面上使用 ajax 显示他们的“个人资料”。

在views/member/index.html.erb中

<table>
 <tr>
  <th>Name</th>
 </tr>

<% @members.each do |member| %>
  <tr>
    <td><%= member.name %> &amp; <%= member.sname %></td>
    <td><%= link_to 'Show', member, :remote => true %></td>
    <td><%= link_to 'Edit', edit_member_path(member) %></td>
    <td><%= link_to 'Destroy', member, :confirm => 'Are you sure?', :method => :delete %>    </td>
  </tr>
<% end %>
</table>

<%= link_to 'New Member', new_member_path %>

<div id="memberprofile">

</div>

在我的成员控制器中,我有这个:

def show
  @member = Member.find(params[:id])

  respond_to do |format|
    format.html # show.html.erb
    format.js
    format.xml  { render :xml => @member }
 end
end

然后在我的 _show.js.rjs 我有这个

page.replace_html('memberprofile', render(@member))

然后在我的 _member.html.erb 部分我有这个:

<h1><%= @member.name %></h1>

几个问题:

1) 从控制台显示“渲染成员/show.html.erb”,但我认为它只会渲染部分成员。这是为什么?

2) 当 ajax 调用结束时,index.html.erb 页面中什么也没有发生。我认为拥有 div 挂钩加上 javascript 文件就可以解决问题...

谢谢大家

【问题讨论】:

  • 尝试将_show.js.rjs重命名为show.js.rjs,看起来你的format.js正在呈现默认show.html.erb

标签: ruby-on-rails ajax ruby-on-rails-3 unobtrusive-javascript


【解决方案1】:

您必须创建一个仅显示成员个人资料的新部分。假设部分名称是 _member.html.erb 在你的索引文件中做:

<%= javascript_include_tag "jquery-1.4.4.min.js", "jquery.form" %>
<script type="text/javascript"> var $j = jQuery.noConflict();</script>

<table>
 <tr>
  <th>Name</th>
 </tr>

<% @members.each do |member| %>
  <tr>
    <td><%= member.name %> &amp; <%= member.sname %></td>
    <td><%= link_to 'Show', "javascript:", :onclick => "show_member(member.id)" %></td>
    <td><%= link_to 'Edit', edit_member_path(member) %></td>
    <td><%= link_to 'Destroy', member, :confirm => 'Are you sure?', :method => :delete %>    </td>
  </tr>
<% end %>
</table>

<%= link_to 'New Member', new_member_path %>

<div id="memberprofile">

</div>


<script type="text/javascript">
  function show_member(m_id) {
   var container = $j("#memberprofile");
        $j.ajax({
            url: '/members/get_member?mid=' + m_id, type: 'get', dataType: 'html',
            processData: false,
            success: function(data) {
                container.html(data);
            }
        });
}
</script>

在您的路线中执行以下操作:

resources :members do
  collection do
    get :get_member
  end
end

在你的控制器中做:

def get_member
  @member = Member.find_by_id(params[:mid])

  render :partial => "member", :layout => false, :locals => {:member => @member}
end

在你的 _member.html.erb 部分

<% unless @member.blank? %>
  <h1><%= @member.name %></h1>
<% else %>
   Record not found :(
<% end %>

【讨论】:

  • 这种方式很好,但在单独的文件中使用 javascript 会更好(请参阅unobtrusive javascript)。关于如何在 Rails 3 中实现它的一个很好的教程is here
猜你喜欢
  • 2011-05-13
  • 2020-07-18
  • 1970-01-01
  • 2011-09-09
  • 1970-01-01
  • 2011-06-13
  • 2012-03-22
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多