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%>

Answer 2

你在你的表单上找到了你的遥控器，并让你的控制器响应一个js

查看：

<%= 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 create
    @user = User.new(params[:user])
    @user.save
    respond_to do |format|
      flash[:notice] = "saved successful"
      format.js # new.js.erb 
    end
  end
end

使用ajax代码创建一个名为new.js.erb的新文件，并根据需要使用ruby embedded sintax

$('div#my_id').html('<%= @user.name%> - <%= @user.phone %>');
$('div#notice').html('<%= flash[:notice] %>');

使用Ajax在Rails中更新部分

2 个答案: