Rails 3-在弹出窗口中的 ajax 调用上呈现部分内容

Posted 2023-03-03

【中文标题】Rails 3-在弹出窗口中的 ajax 调用上呈现部分内容

【英文标题】：Rails 3- Render partial on an ajax call within a popup

【发布时间】：2012-02-19 14:50:06

【问题描述】：

我有一个带有 remote=>true 的按钮，它通过以下方式调用一个弹出窗口（一个 jquery 弹出窗口，而不是真正的弹出窗口）：

$modal = $('#modal')
$modal_close = $modal.find('.close')
$modal_container = $('#modal-container')
$task_select_div = $('.activity_task_add')

# Handle modal links with the data-remote attribute
$('a[data-remote]').on 'ajax:success',  (xhr, data, status) ->
  $modal
    .html(data)
    .prepend($modal_close)
    .css('top', $(window).scrollTop() + 150)
    .show()

#This is the callback that is not being executed.
$('form[data-remote]').on 'ajax:success',  (xhr, data, status) ->
  alert(data)
  $modal_container.hide()
  $modal.hide()
  $task_select_div.html(data)

在该弹出窗口中，我在此表单的提交按钮中有另一个带有 remote_tag 的表单，我调用和操作，底部有以下代码：

respond_to do |format|
    if @task.save
       format.html  redirect_to @task, notice: 'Task was successfully created.' 
       format.json  render json: @task, status: :created, location: @task 
       format.js render :partial => 'tasks', :locals => :tasks => current_user.department.tasks
    else
     format.html  render action: "new" 
     format.json  render json: @task.errors, status: :unprocessable_entity 
    end
end

它执行 format.js 并且控制台显示“Rendered tasks/_tasks.html.erb (5.8ms)”但 ajax 调用的回调不起作用。

$('form[data-remote]').on 'ajax:success',  (xhr, data, status) ->
  alert(data)

我需要接收 ajax:success 事件才能隐藏弹出窗口。 有什么帮助吗？

【参考方案1】：

删除这一行：

format.js render :partial => 'tasks', :locals => :tasks => current_user.department.tasks

更新你的 js 回调：

$('form[data-remote]').on 'ajax:success',  (xhr, data, status) ->
  alert("hello world")
  $modal_container.hide()
  $modal.hide()
  $task_select_div.html(<%= escape_javascript(render :partial => 'tasks', :locals => :tasks => current_user.department.tasks ) %>)

【讨论】：

如何传递局部变量？这是标准的rails 3方式吗？我不应该使用咖啡脚本文件吗？

我从来没有尝试过传递局部变量，只是实例变量。你不能使用实例变量吗？是的，这很标准，您不应该专门使用咖啡脚本文件。 net.tutsplus.com/tutorials/javascript-ajax/… 了解更多信息

是的。 action.js.erb 应该在正确的视图文件夹中：app/views/controller 与控制器的任何其他视图一样。

文件 action.js.erb 只是 ajax 调用的回调（在您的情况下，它只是打开一个模式）。您的部分“任务”可以在任何视图（.html.erb 或 .js.erb）中使用或不使用 ajax 调用

不，只能导入“assets”文件夹中的文件。 action.js.erb 就像一个视图。

【参考方案2】：

解决了。

改变了我的respond_to do |格式|为此：

if request.xhr?
  task_list = render_to_string :partial => 'tasks', :locals => :tasks => current_user.department.tasks
  task_list =  task_list.html_safe.gsub(/\n/, '').gsub(/\t/, '').gsub(/\r/, '')
  render :json => :html => task_list, :error => ''
else
  respond_to do |format|
    if @task.save
          format.html  redirect_to @task, notice: 'Task was successfully created.' 
          format.json  render json: @task, status: :created, location: @task   
    else
      format.html  render action: "new" 
      format.json  render json: @task.errors, status: :unprocessable_entity 
    end
  end
end

还有我的 javascript：

$('form[data-remote]').on 'ajax:success',  (xhr, data, status) ->
  $modal_container.hide()
  $modal.hide()
  $task_select_div.html(data.html)

您如何看待这个解决方案？有什么缺点吗？

【讨论】：

仅供参考 .gsub(/[\n\t\r]/, '') 或 .gsub(/\n|\t|\r/, '') 是避免执行多个 gsub 的几种方法。