Question

I am writing a ruby on rails 3 application that is very simple: users can create posts that display on their homepage, as well as edit these posts and delete them. My question pertains to the editing function. I know the typical way to edit something is to call

<%= link_to "edit", edit_post_path(post_item) %>

where post_item is the selected post. However, instead of redirecting the user to the edit page (/views/posts/edit.html.erb), I would like to make it so that when the user clicks the edit button, the edit page is rendered in a modal. I am using twitter-bootstrap, and know how to create modals. Any ideas?

Answer 1

Not sure if you’re still working on this, I had a similar problem and resolved it by doing the following:

I’m using the jquery-ui dialog, not bootstrap modal as couldn’t make it work. so add the library there should you not have it.

in assets/javascripts/application.js i have

$(document).ready(function() {

        var modal=$('#modal');
        $('#edit_house_link').click(function(e) {
          var edit_url = $(this).attr('href'); 
          modal.load(edit_url + ' #content',function(){
            modal.dialog("open");
          });
        });
        modal.dialog({ autoOpen: false, title: "Your title", draggable: true,
        resizable: false, modal: true, width:'auto'});

    });

then in my layouts/application.html.erb i have

<p id="modal"></p>

somewhere inside the body of the page, which is the element where we’re going to load all the info.

in my index view i have the link that handles this, note that my model is called house, so change to whatever yours is called.

<%= link_to 'Edit', edit_house_path(house), :remote => true, :id => 'edit_house_link' %>

As you can see, i’m giving this the edit_house_link id, which I’m referencing in the application.js file.

inside the house controller i have:

def update
  @house = House.find(params[:id])
  respond_to do |format|
    if @house.update_attributes(params[:house])
      format.js 
    else
      format.js
    end
  end
end

and then i have three views, one is the edit.html.erb, update.js.erb and _form.html.erb for the views/houses folder.

so inside views/houses/update.js.erb i have:

<%- if @house.errors.any? %>
  $('#modal').html('<%= escape_javascript(render('form')) %>');
<%- else %>
  $('#modal').dialog('close');
  $('#modal').remove();
  window.location.reload();
<%- end %>

this code is to prevent the modal from closing, should there be errors. as you can see, if no errors are present, then it closes the dialog and refreshes the page to display the changes.

in the views/houses/edit.html.erb file this is what I have:

<div id="content">
<%= render :partial => 'form' %>
</div>

so if you look again at the content id in the application.js file, we’re loading this inside the modal.

and finally the partial views/houses/_form.html.erb

<%= simple_form_for(@house, :html => { :class => 'form-vertical' }, :remote => true) do |f| %>
<fieldset>
    <%= f.input :address %>
    <%= f.input :postcode %>
    <%= f.input :city %>
    <%= f.input :country %>
</fieldset>
    <div class="form-actions">
    <%= f.button :submit %>
    </div>
<% end %>

I’m using simple_form, so you can adapt to your needs by having a normal form, but i had to add the :remote => true attribute for it to actually work.

hopefully this helps!