简体   繁体   English

显示结果数据而无需刷新页面即可在Rails中使用ruby刷新页面

[英]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 - 您应该执行以下操作-

  1. 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM