Javascript没有加载最新提交的数据
我最近问过这个问题: Javascript Form Submition ?
现在我想弄清楚为什么在表单提交后, 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:
$(function(){ $('#new_admin_category').on('ajax:success', function(event, data, status, xhr){ $("#dashboard_categories").html(data.html); }); });
解决了
我使用@PinnyM的方法并添加了一个create.json.erb文件,其中包含以下代码:
{ "html":" '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
)可能只是返回partial,并让回调决定如何处理它:
# 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); }); });
UPDATE
刚刚注意到@RomanSpiridonov所写的内容 – 他是完全正确的。 在尝试添加新分区之前,您无法检索@categories。 将行@categories = ...
移动到create
方法的末尾。
另外,我注意到你的Category模型是命名空间的 – 这意味着你的默认表单id
属性更像是’new_admin_category’。 您应该检查它实际呈现的方式,并在注册成功回调时在jQuery选择器中使用该ID:
$(function(){ $('#new_admin_category').on('ajax:success', function(...
保存新类别之前定义的方法“创建”中的实例变量@categories。 这就是为什么你无法在模板中收到最新类别的原因。 我想你可以这样写:
$("#dashboard_categories").append("<%= escape_javascript(render("category")) %>");
您可以在assets/javascripts
文件夹中的文件中添加这段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
在这里阅读更多