在Rails中使用AJAX的多步骤表单

Question

我遵循Railscast #217，它展示了如何从部分构建多步骤表单。我按照Ryan的指示，让我的代码工作，但想知道如何转换，使Rails将使用AJAX加载部分?

users_controller.rb

class UsersController < ApplicationController
  ...
  def new
    session[:user_params] ||= {}
    @user = User.new
  end
  def create
    session[:user_params].deep_merge!(params[:user]) if params[:user]
    params.each do |key,value|
      session.deep_merge!(key=>value) if params[:user]
    end
    @user = User.new(session[:user_params])
    @user.current_step = session[:user_step]
    if params[:prev_button]
      @user.previous_step
    elsif @user.last_step?
      @user.save
    else
      @user.next_step
    end
    session[:user_step] = @user.current_step
    if @user.new_record?
      render :new
    else
      session[:user_step] = session[:user_params] = nil
      flash[:success] = "Welcome to Friends First!"
      redirect_to @user
    end
    ...
end

user.rb

class User < ActiveRecord::Base
  attr_writer :current_step
  def current_step
    @current_step || steps.first
  end
  def steps
    %w[step1 step2 step3]
  end
  def next_step
    self.current_step = steps[steps.index(current_step) + 1]
  end
  def previous_step
    self.current_step = steps[steps.index(current_step) - 1]
  end
  def first_step?
    current_step == steps.first
  end
  def last_step?
    current_step == steps.last
  end
end

new.html.erb

<%= simple_form_for(@user) do |f| %>
  <%= render 'shared/error_messages' %>
  <%# render @user.current_step, :f => f %>
  <div id="form"></div>
  <div class="center">
    <%= f.submit "Previous", class: "btn btn-primary", :name => "prev_button" unless @user.first_step?  %>
    <%= f.submit "Next", class: "btn btn-primary", :name => "next_button" unless @user.last_step? %>
    <%= f.submit "Submit", class: "btn btn-primary", :name => "submit_button" if @user.last_step? %>
  </div>

<% end %>    

编辑我要贴一张我的照片。注意f变量—我不知道如何使用AJAX将它从表单传递到我的部分。

_step1.html.erb

<div class="offset1">
  <%= f.input :first_name %>
  <%= f.input :last_name %>
  <%= f.input :email %>
  <%= f.input :password %>
  <%= f.input :password_confirmation %>  
</div>

create.js.erb

$('#form').html('<%= escape_javascript(render(@user.current_step)) %>');

这行不通，我需要通过某种方式传递f

Answer 1

似乎在您的rails操作中，您没有处理AJAX请求，也没有在视图中初始化它们。

使用AJAX，您需要按照以下顺序:

1. 来自客户端的正确请求。
服务器端正确处理。
2. 正确处理客户端服务器响应。

下面是一个简单的ajax示例，下面是一个使用ajax的分页示例

祝你好运:

Answer 2

让它看起来更ajax的一个非常简单的方法是使用pjax-rails。

你将需要改变几乎什么，只定义pjax-containerdiv将被重新加载。希望这对你有所帮助。

Answer 3

@mikglaz我也面临同样的问题。我发现的解决方案是在您的'.js中重新创建表单。erb文件。我从这里找到的