使用JqueryUI对话框类从AJAX渲染rails部分

I have the following method that gets called via AJAX request when user hits a button on my page.

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

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

I want this method to return a partial that can be displayed in JqueryUI's modal.

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

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

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

As shown above, I'm trying to use the response from my controller to generate the dialog, but I'm not sure about this. The documentation confuses me a bit: http://jqueryui.com/dialog/#modal

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

topics/_savings_easter_egg.slim

专题/ _savings_easter_egg.slim

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

This is the partial that I want to pass and display in the modal. Right now, I'm getting a modal tos how, but it is a thin white line with no text. What am I doing wrong?

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

1 个解决方案

#1

jQuery UI dialogs are based on DOM elements which already exist at the time the dialog is created - the dialog is simply showing the content of e.g. a DIV which is already part of your page's DOM structure.

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

If you want to display your partial in a dialog, you first have to insert it into the page, e.g. by replacing an existing element content with it

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

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

or replacing an existing container (if you have an additional container element in your partial as in your example)

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

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

Afterwards you will be able to create a dialog for this container element

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

jQuery("#your_container").dialog()

EDIT: I think it's possible to use a dynamic content as well, e.g.

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

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

but I'm not sure if the dialog will react the same way. I'm usually using one dialog element in the page and replace its content with what's needed at the moment.

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

#1