使用 JqueryUI 对话框类从 AJAX 渲染部分轨道答案

【问题标题】：Render rails partial from AJAX with JqueryUI dialog class使用 JqueryUI 对话框类从 AJAX 渲染部分轨道
【发布时间】：2012-11-10 07:37:20
【问题描述】：

当用户点击我页面上的按钮时，我有以下通过 AJAX 请求调用的方法。

def savings_easter_egg
  @savings = params[:savings] if params[:savings]
  return render :partial => "topics/savings", :locals => { :savings => @savings }    
end

我希望这个方法返回一个可以在 JqueryUI 的模态中显示的部分。

   $.ajax({
      type: 'GET',
      url: '/topics/savings_easter_egg',
      data: {
        savings: data[key]['saving']
      } ,

      success: function(response) {
        $(response).dialog({
          height: 840,
           modal: true,
         });              
      }
    });

如上所示，我正在尝试使用来自控制器的响应来生成对话框，但对此我不确定。文档让我有点困惑：http://jqueryui.com/dialog/#modal

topics/_savings_easter_egg.slim

#dialog-modal
  p Hi
  = params[:savings]
  = @savings

这是我想在模态中传递和显示的部分。现在，我得到了一个模态，但它是一条没有文字的细白线。我做错了什么？

【问题讨论】：

标签： jquery ruby-on-rails ajax ruby-on-rails-3 jquery-ui

【解决方案1】：

jQuery UI 对话框基于创建对话框时已经存在的 DOM 元素 - 对话框只是显示例如一个 DIV，它已经是您页面的 DOM 结构的一部分。

如果你想在对话框中显示你的部分，你首先必须将它插入到页面中，例如通过用它替换现有的元素内容

jQuery("#your_container").html(YOUR RENDERED PARTIAL)

或替换现有容器（如果您的部分中有一个额外的容器元素，如您的示例中所示）

jQuery("#your_container").replaceWith(YOUR RENDERED PARTIAL)

之后，您将能够为此容器元素创建一个对话框

jQuery("#your_container").dialog()

编辑：我认为也可以使用动态内容，例如

jQuery("<p>Hello World</p>").dialog()

但我不确定对话框是否会以同样的方式做出反应。我通常在页面中使用一个对话框元素并将其内容替换为当前需要的内容。

【讨论】：