Rails - AJAX a Modal Dialog?

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

Answers


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.


Need Your Help

How to change reset password email subject in laravel?

php laravel email laravel-5.3

I am beginner in Laravel. Currently I am learning this framework. My curent Laravel version is 5.3.

Why use Repository Pattern or please explain it to me?

c# entity-framework repository-pattern

I am learning repository pattern and was reading Repository Pattern with Entity Framework 4.1 and Code First