Javascript没有加载最新提交的数据

Javascript not loading latest submitted data

本文关键字：提交 数据 最新 加载 Javascript      更新时间：2023-09-26

我最近问了这个问题:Javascript表单提交?

现在我试图找出为什么，表单提交后，create.js.erb不加载最新的数据(提交的数据)。

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

…为什么?

编辑:

最新代码-

类别控制器:类Admin:: categorescontroller <管理: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') %>"
}

并将我的create方法更改为:

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

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

您需要处理远程(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(...

在保存新类别之前定义的方法"create"中的实例变量@categories。这就是为什么您无法在模板中接收最新的类别。我想你可以这样写:

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

您可以将这段javascript添加到assets/javascripts文件夹中的文件

$(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.
})

要设置your_form_selector，您可以在表单中添加id并使用#myFormId

点击这里阅读更多

相关文章：