使用Ajax在Rails中更新部分

Question

我是Rails的初学程序员,我正在尝试创建一个简单的表单,其中包含姓名,电子邮件和电话号码,然后当您单击提交时,使用Ajax更新页面.

即如果您在表单的文本字段中输入User,user @ example.com和555-555-555并单击提交,您应该得到

姓名:用户电子邮箱:user@example.com电话号码:555-555-555

我知道这是一个简单的问题,但我不太清楚如何编写JavaScript以使其工作.

这是我的部分代码:

<%= form_for(@user, :remote => true) do |f| %>

Name: <div="Name"><%= f.text_field :name %></div>
Email: <div="Email"><%= f.text_field :email %></div><br/>
Phone Number: <div="Phone Number"><%= f.text_field :phone_number%></div><br/>
<%= f.submit "Submit" %>

我的控制器看起来像这样:

class UsersController < ApplicationController

def new
    @user = User.new
end

def create
    @user = User.new(params[:user])
end
end

在我的create.js.erb文件中,我是否使用.update函数将输入的信息替换为文本字段,还是我还要做其他事情？

Answer 1

如果将表单包装在div中,则可以在以后轻松替换其内容:

<div id="theform">
<%= form_for(@user, :remote => true) do |f| %>

Name: <div="Name"><%= f.text_field :name %></div>
Email: <div="Email"><%= f.text_field :email %></div><br/>
Phone Number: <div="Phone Number"><%= f.text_field :phone_number%></div><br/>
<%= f.submit "Submit" %>
</div>

然后在你的create.js.erb文件中:

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

在您的/app/views/users/_user.html.erb中

Name: <%= user.name%> Email: <%= user.email%> Phone Number: <%= user.phone%>