Question

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?

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

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.