[英]Display result data without page refresh on form submission in ruby on rails
I'm very new in ruby on rails. 我是红宝石的新手。 I'm stuck with a problem.
我陷入了一个问题。 I have a list of subjects and below this list I have a form to add subject.
我有一个主题列表,在这个列表下方,我有一个添加主题的表格。 I'm trying to add a subject without page refresh and display this subject just below the list of subject.
我正在尝试添加主题而不刷新页面,并在主题列表下方显示该主题。 New added subject is inserting in database but it's not displaying in bottom of list without page refresh.
新添加的主题正在数据库中插入,但没有页面刷新就不会显示在列表底部。 Here is my controller (subject_controller.rb)
这是我的控制器(subject_controller.rb)
class SubjectController < ApplicationController
layout 'standard'
def list
@subjects = Subject.find(:all)
end
def show
@subject = Subject.find(params[:id])
end
def create
@subject = Subject.new(params[:subject])
if @subject.save
render :partial => 'subject', :object => @subject
end
end
end
Here is my partial file (_subject.html.erb) 这是我的部分文件(_subject.html.erb)
<li id="subject_<%= subject.id %>">
<%= link_to subject.name, :action => 'show', :id => subject.id %>
<%= "(#{subject.books.count})" -%>
</li>
Here is my view page (list.html.erb) 这是我的查看页面(list.html.erb)
<ul id="subject_list">
<% @subjects.each do |c| %>
<li><%= link_to c.name, :action => 'show', :id => c.id %>
<%= "(#{c.books.count})" -%></li>
<% end %>
</ul>
<div id="add_subject">
<%= form_for(:subject, :url => {:action => 'create'},
:update => "subject_list", :position => :bottom,
:html => {:id => 'subject_form'}, :remote => true) do %>
Name: <%= text_field "subject", "name" %>
<%= submit_tag 'Add', :id => 'create_button', :onClick => 'javascript:submitForm();' %>
<% end %>
</div>
Here is my js file 这是我的js文件
function submitForm(){
jQuery.ajax({
type: 'POST',
//url: "/subject/create",
data:jQuery('#subject_form').serialize(),
error: function(){ },
success: function(data){ alert(data) },
complete: function (){ }
});
return false;
}
I'm using ruby 1.9.3 and rails 3.2.6 我正在使用ruby 1.9.3和rails 3.2.6
you should do the following - 您应该执行以下操作-
In your list.html.erb replace 在您的list.html.erb中替换
<%= submit_tag 'Add', :id => 'create_button', :onClick => 'javascript:submitForm();' %>
with 与
<%= submit_tag 'Add', :id => 'create_button' %>
2. Create a new view create.js.erb with the following content - 2.创建一个具有以下内容的新视图create.js.erb-
$("#subject_list").innerHTML += "<%= escape_javascript(render(:partial => 'subject')) %>"
3. Update your controller method - 3.更新您的控制器方法-
if @subject.save
#render :partial => 'subject', :object => @subject
respond_to do |format|
format.js
end
end
4. And finally in your subject partial use instance variable "@subject" instead of "subject" and discard your js file. 4.最后,在您的主题中,部分使用实例变量“ @subject”而不是“ subject”,并丢弃您的js文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.