0

我最近问了这个问题：Javascript 表单提交？

现在我试图弄清楚为什么在提交表单后，create.js.erb没有加载最新的数据（提交的数据）。

如果我再次提交数据，表格将更新倒数第二个数据，但不是绝对最新的。

...为什么？

编辑：

最新代码 -

类别控制器：类 Admin::CategoriesController < Admin::AdminController ...

  def create
    @category = Admin::Category.new(params[:admin_category])
    # You can't retrieve the @categories before attempting to add new one. Keep at end of create method.
    @categories = Admin::Category.all
    respond_to do |format|
      if @category.save
        save_to_history("The category \"#{@category.name}\" has been created", current_user.id)
        format.json { render json: { html: render_to_string(partial: 'categories') } }
        # I've tried both the above and bellow
        #format.json { render json: { html: render_to_string('categories') } }
        format.html { redirect_to(admin_categories_url, :notice => 'Category was successfully created.') }
        format.xml  { render :xml => @category, :status => :created, :location => @category }
      else
        format.html { render :action => "new" }
        format.xml  { render :xml => @category.errors, :status => :unprocessable_entity }
      end
    end

  end

  ...
end

Javascript：

<script type='text/javascript'>
  $(function(){
    $('#new_admin_category').on('ajax:success', function(event, data, status, xhr){
      $("#dashboard_categories").html(data.html);
    });
  });
</script>

解决了

我使用@PinnyM 的方法并添加了一个带有以下代码的 create.json.erb 文件：

<% self.formats = ["html"] %>
{
  "html":"<%= raw escape_javascript( render :partial => 'categories', :content_type => 'text/html') %>"
}

并将我的创建方法更改为：

def create
    @category = Admin::Category.new(params[:admin_category])

    respond_to do |format|
      if @category.save
        # You can't retrieve the @categories before attempting to add new one. Keep after save.
        @categories = Admin::Category.all
        save_to_history("The category \"#{@category.name}\" has been created", current_user.id)
        format.json 
        format.html { redirect_to(admin_categories_url, :notice => 'Category was successfully created.') }
        format.xml  { render :xml => @category, :status => :created, :location => @category }
      else
        format.html { render :action => "new" }
        format.xml  { render :xml => @category.errors, :status => :unprocessable_entity }
      end
    end
  end

如果这很混乱，请提供建议。

4

3 回答 3

1

您需要处理远程 (AJAX) 提交的成功回调。data参数（第二个参数）保存响应：

$(function(){
  $('#new_category').on('ajax:success', function(event, data, status, xhr){
    eval(data);
  });
});

更好的方法（并避免危险eval）可能是只返回部分，并让回调决定如何处理它：

# in create action
format.json { render json: { html: render_to_string('categories') } }

# in your js, run at page load
$(function(){
  $('#new_category').on('ajax:success', function(event, data, status, xhr){
    $("#dashboard_categories").html(data.html);
  });
});

更新

刚刚注意到@RomanSpiridonov 写的 - 他是绝对正确的。在尝试添加新类别之前，您无法检索 @categories。将该行移动@categories = ...到方法的末尾create。

另外，我注意到您的类别模型是命名空间的 - 这意味着您的默认表单id属性更可能类似于“new_admin_category”。在注册成功回调时，您应该检查它的实际呈现方式并在 jQuery 选择器中使用该 id：

$(function(){
  $('#new_admin_category').on('ajax:success', function(...
于 2013-05-13T14:35:42.743 回答
1

在保存新类别之前定义的方法“create”中的实例变量@categories。这就是您无法在模板中收到最新类别的原因。我想你可以写这样的东西：

$("#dashboard_categories").append("<%= escape_javascript(render("category")) %>");

于 2013-05-13T14:55:07.450 回答
0

You could add this piece of javascript in a file inside assets/javascripts folder

$(your_form_selector).on('ajax:success', function(){
  // Read link to see what event names you can use instead of ajax:success and
  // which arguments this function provides you.
})

To set your_form_selector you could add an id to your form and use #myFormId

Read more here

于 2013-05-13T15:16:57.113 回答