1

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

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.

   $.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

topics/_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?

4

1 回答 1

1

jQuery UI 对话框基于在创建对话框时已经存在的 DOM 元素 - 对话框只是显示例如 DIV 的内容，该 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()

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

于 2012-11-10T08:06:49.703 回答