显示结果数据而无需刷新页面提交的表单(在Rails中使用ruby) [英] Display result data without page refresh on form submission in ruby on rails

问题描述

我是红宝石领域的新手.我陷入了一个问题.我有一个主题列表，在这个列表下方，我有一个添加主题的表格.我正在尝试添加一个无需刷新页面的主题，并将该主题显示在主题列表的正下方.新添加的主题正在数据库中插入，但没有页面刷新就不会显示在列表底部. 这是我的控制器(subject_controller.rb)

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)

    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  

这是我的部分文件(_subject.html.erb)

Here is my partial file (_subject.html.erb)

<li id="subject_<%= subject.id %>">
<%= link_to subject.name, :action => 'show', :id => subject.id %>
<%= "(#{subject.books.count})" -%>
</li>

这是我的查看页面(list.html.erb)

Here is my view page (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>

这是我的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;
 }

我正在使用ruby 1.9.3和rails 3.2.6

I'm using ruby 1.9.3 and rails 3.2.6

推荐答案

您应该执行以下操作-

1. 在您的list.html.erb中替换

1. In your list.html.erb replace

<%= submit_tag 'Add', :id => 'create_button', :onClick => 'javascript:submitForm();' %>

与

<%= submit_tag 'Add', :id => 'create_button' %>

2.创建具有以下内容的新视图create.js.erb-

2. Create a new view create.js.erb with the following content -

$("#subject_list").innerHTML += "<%= escape_javascript(render(:partial => 'subject')) %>"

3.更新您的控制器方法-

3. Update your controller method -

    if @subject.save
        #render :partial => 'subject', :object => @subject
        respond_to do |format|
            format.js
        end
    end

4.最后，在您的主题中，部分使用实例变量"@subject"而不是"subject"并丢弃您的js文件.

4. And finally in your subject partial use instance variable "@subject" instead of "subject" and discard your js file.

这篇关于显示结果数据而无需刷新页面提交的表单(在Rails中使用ruby)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！