在视图中从一个部分实现 ajax 到另一个部分时出现问题

Question

我有 2 个控制器：欢迎(处理主页(和邀请(帮助人们创建/管理邀请(。我试图在同一welcome.html.erb邀请视图中的两个部分：_form.html.erb(用于创建邀请(和_results.html.erb(在同一welcome.html.erb页面上通过 Ajax 显示邀请(。 我在邀请的视图文件夹中也有create.js.erb。 输入工作正常，但没有实时更新。我仍然需要刷新页面。有谁知道我做错了什么吗？

_form.html.erb代码为：

<h3 class="section_title"> Express meeting request IR </h3>
<div id="theform">
<%= simple_form_for invitation do |f| %>
<%= f.error_notification %>
<%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
<%= f.label "Dest." %>
<%= f.collection_select(:guest_id, User.all, :id, :full_name, {}, class: "selectpicker", title: "Choose recipient", multiple: true, data: {style: "form-control", size: "200", width: "100%"})  %>
<br><br>
<%= f.input :event_id %>
<%= f.input :start %>
<%= f.input :title %>
<%= f.input :type_of_event %>
<%= f.label "Memo" %> <br>
<%= f.text_area :memo,  as: :text, class: "text_area_iro", rows: 5 %>
<div class="form-actions">
<%= f.button :submit, class: "btn-custom"%>
</div>
<% end %>
</div>

_result.html.erb(删除了表的某些标题(如下所示：

<% @invitationsR.each do |invitation| %>
<tr>
<td><%= find_name(invitation.user_id) %></td>
<td><%= invitation.start %></td>
<td><%= TypeEvenement.find_by(id: invitation.type_of_event).type_name %> </td>         </tr>
<% end %>

create.js.erb看起来像：

$("#theform").html("<%= escape_javascript(render :partial =>  'invitations/result', :locals => {:invitation => @invitation}) %>");

Welcome.html.erb看起来像

<%= render :partial =>  'invitations/form', :locals => {:invitation => Invitation.new} %>
<%= render :partial =>  'invitations/result', :locals => {:invitations => @invitations} %>

控制器像往常一样使用普通的新方法和创建方法。 创建方法如下：

def create
@listmail = params[:invitation][:guest_id]
@listmail = @listmail.join(' ').split
@listmail.each do |v|
@invitation = current_user.invitations.build(invitation_params)
@invitation.guest_id = v
puts(v)
@invitation.save!
end
if @invitation.save
redirect_to invitations_path
else
render 'new'
end
end

Answer 1

你有一些错别字和遗漏点。 在创建方法中，您需要定义一个名为@invitations的实例变量，您将在其中作为局部变量传入create.js.erb部分变量：

def create
---- skip code ----
@invitation.save!
end
@invitations = current_user.invitations # define this one 
if @invitation.save
---- skip code ----
end

现在您定义了变量，因此create.js.erb文件中将是：

$("#theform").html("<%= escape_javascript(render :partial =>  'invitations/result', :locals => {:invitations => @invitations}) %>");

在_result.html.erb：

<% invitations.each do |invitation| %>
## Content
<% end %>

Answer 2

1 =>添加远程:remote=> true，让表单通过ajax请求提交。

<%= simple_form_for invitation, id: "invitation_form", :remote=> true do |f| %>
###Content
<%end%>

2 => 将结果部分包装在单独的 id 中，如下所示：-

<%= render :partial =>  'invitations/form', :locals => {:invitation => Invitation.new} %>
<div id "result_partial">
<%= render :partial =>  'invitations/result', :locals => {:invitations => @invitations} %>
</div>

3 => 在部分中使用局部变量(邀请而不是@invitations(总是很好的做法，即

在_result.html.erb

<% invitations.each do |invitation| %>
<tr>
<td><%= find_name(invitation.user_id) %></td>
<td><%= invitation.start %></td>
<td><%= TypeEvenement.find_by(id: invitation.type_of_event).type_name %> </td>  
</tr>
<% end %>

4 => 重构创建操作(即始终使用您应该在 html 或 js 中响应的格式(

def create
@listmail = params[:invitation][:guest_id]
@listmail = @listmail.join(' ').split
@listmail.each do |v|
@invitation = current_user.invitations.build(invitation_params)
@invitation.guest_id = v
puts(v)
if @invitation.save!
@invitations = current_user.invitations #get all invitations  including new invitations  that has been saved just now
respond_to do |format|
format.html{ redirect_to invitations_path }
format.js { render :layout => false }
end
else
window.location = "http://localhost:3000/invitations.new";
end
end
end

5 => 回复后

$('#invitation_form').[0].reset(); #reset form
$("#result_partial").html("<%= j render partial: 'invitations/result', :locals => {:invitation => @invitation}) %>"); #Refresh only results

Answer 3

以下代码用于在 Ajax 验证后清除窗体：

$("#result_partial").html("<%= j render partial: 'invitations/result', :locals => {:invitation => @invitation} %>");
$("#result2_partial").html("<%= j render partial: 'invitations/result2', :locals => {:invitation => @invitation} %>");
$("#theform").remove();
$('#invitation_form').html("<%= j render partial: 'invitations/form', :locals => {:invitation => Invitation.new}  %>");

只是不要忘记使用以下命令重置 select2 项：

$(document).ready(function(){$('#invitation_guest_id').select2({
placeholder: "Contact name, list or company",
minimumInputLength: 3
});
});