[英]Issue implementing ajax from one partial to another partial within a view
I have 2 controllers: Welcome (which handles the homepage) and Invitations (Which help people to create/manage invites). 我有2个控制器:欢迎(处理主页)和邀请(帮助人们创建/管理邀请)。 I am trying to have on the same welcome.html.erb
both partials from Invitation view: _form.html.erb
(for creating invitation) and _results.html.erb
(to display the invites via Ajax on the same welcome.html.erb
page). 我试图在邀请视图中使用相同的welcome.html.erb
部分: _form.html.erb
(用于创建邀请)和_results.html.erb
(在同一个welcome.html.erb
上通过Ajax显示邀请)页)。 I also have have create.js.erb
in the Invitation's view folder. 我在邀请的视图文件夹中也有create.js.erb
。 The input work well but there is no live update. 输入工作正常,但没有实时更新。 I still need to refresh the page. 我仍然需要刷新页面。 Does anyone know what i am doing wrong please? 有谁知道我做错了什么吗?
_form.html.erb
code is: _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
(certain header of the table removed) looks as: _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
looks as: create.js.erb
看起来像:
$("#theform").html("<%= escape_javascript(render :partial => 'invitations/result', :locals => {:invitation => @invitation}) %>");
Welcome.html.erb
looks like Welcome.html.erb
看起来像
<%= render :partial => 'invitations/form', :locals => {:invitation => Invitation.new} %>
<%= render :partial => 'invitations/result', :locals => {:invitations => @invitations} %>
The controller is as usual with plain new and create methods. 控制器与普通的new和create方法一样。 The create method is as follows: create方法如下:
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
You have some typos and missing points. 你有一些错别字和遗漏点。 In your create method you need to define a instance variable called @invitations
which you will pass in the partial as a local variable in create.js.erb
file: 在你的create方法中,你需要定义一个名为@invitations
的实例变量,你将把它作为create.js.erb
文件中的局部变量传递给partial:
def create
---- skip code ----
@invitation.save!
end
@invitations = current_user.invitations # define this one
if @invitation.save
---- skip code ----
end
Now that you define the variable, thus in create.js.erb
file would be: 现在您定义了变量,因此在create.js.erb
文件中将是:
$("#theform").html("<%= escape_javascript(render :partial => 'invitations/result', :locals => {:invitations => @invitations}) %>");
In _result.html.erb
: 在_result.html.erb
:
<% invitations.each do |invitation| %>
## Content
<% end %>
1 => Add remote :remote=> true
to let form submit via ajax request. 1 =>添加remote :remote=> true
,让表单通过ajax请求提交。
<%= simple_form_for invitation, id: "invitation_form", :remote=> true do |f| %>
###Content
<%end%>
2 => wrap result partial within a separate id as: - 2 =>将结果部分包含在单独的ID中:
<%= render :partial => 'invitations/form', :locals => {:invitation => Invitation.new} %>
<div id "result_partial">
<%= render :partial => 'invitations/result', :locals => {:invitations => @invitations} %>
</div>
3 => It's always good practice to use local variable (invitations instead of @invitations) in partial ie 3 =>在部分ie中使用局部变量(邀请而不是@invitations)总是很好的做法
In _result.html.erb
在_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 => Refactor create action (ie always use in which format you should respond in html or js) 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 => After respond back 5 =>回复后
$('#invitation_form').[0].reset(); #reset form
$("#result_partial").html("<%= j render partial: 'invitations/result', :locals => {:invitation => @invitation}) %>"); #Refresh only results
The following code works to clear the form after the Ajax validation: 以下代码用于在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} %>");
Just do not forget to reset the select2 items with : 只是不要忘记重置select2项目:
$(document).ready(function(){$('#invitation_guest_id').select2({
placeholder: "Contact name, list or company",
minimumInputLength: 3
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.