Rails - AJAX a Modal Dialog?

Question

I'm interested in learning how to AJAX a modal dialog. Typically if I wanted to add a modal dialog to my web site I added the jquery UI dialog code in my main JS file and binded it to an ID.

I believe with Rails I can create a Link, which fetches all the dialog code from the server and then opens the dialog.

Is this true?

If so, can you help me understand by providing a simple example of where everything lives in the rails MVC world?

Thanks

Answer 1

Gosh, you asked this 4 months ago so you've probably figured this out by now. I also had trouble finding a good write up on how to do this. Here's what I figured out:

In whatever page you want to pull up this dialog box, you want to have a div like so (notice you don't want to display this yet):

<div id="person-form" title="Person" style="display:none"></div>

In that view, you also want an Ajax call to pull up this dialog box:

<%= link_to 'Edit Profile', edit_person_path(person), :remote => true %>

Obviously, you want this edit_person_path to route to some action. That action should render a js.erb that has something like the following (in jQuery):

$("#person-form").dialog({
  autoOpen: true,
  height: 600,
  width: 600,
  modal: true,
  title: 'Edit Person',
  buttons: {
    "Edit": function() { $("#edit_person_<%= @person.id %>").submit() },
  },
  open: function() {
    $("#person-form").html("<%= escape_javascript(render('form')) %>")
  },
});

This will render a partial _form.html.erb into the dialog box.

Note: you're going to need to setup jQueryUI style as well for the dialog to render nice and pretty.