opening a jquery popup form in rails to display comments and create a comment

I'm have the standard comments controller attached to my project through a has_many association.

I have a set of rows that show the latest comments.

When the user clicks on the comment that is displayed (let's say they click on title), then i want

1)a popup to open that shows a) a comment submit form b) underneath the comment form, a list of all comments associated with the project.

i'm having a hard time with getting the popup t开发者_如何学运维o work and then populating the popup with 1 and 2 from above.

when i submit hte form, i want it to refresh the popup with the same setup (new comment form and list of existing comments below.

i think i can do this with jquery and rails, but not sure how. i'm using jquery-rails.

thanks for the help!

It sounds like you're going to want to use a little AJAX in your Rails. Rails' unobtrusive JavaScript and AJAX capability allows you to load remote views into pop-ups without reloading the page, and I think what you probably want to do here is load a remote view containing your comment edit/display combination layout into your pop-up. Then have AJAX update the main page once the dialog is closed.

I would start with this short tutorial on using unobtrusive JavaScript with AJAX with Rails 3, then check out Facebox, which I learned about from this post that asks a question related to yours.

Best of luck!

As a start you could take at look at the JQuery dialog demo - put a form inside the dialog and submit it with ajax (remote => true) and close the dialog if successful. Evan's answer will give you a prettier and ultimately better solution (as will many other lightbox-like gems) but using a jquery dialog is probably the simplest way to start

I went with Facebox and both answers were good so thank you. However i have the following problem: Any ideas?

with Facebox, i'm getting raw text when i use it for the ('#facebox .content') selector. It works fine for ('#facebox') or ('#facebox .popup'). Have you guys run into this? By raw output, i mean the following:

$('#facebox .content').html("
\n Hello from box div\n<\/div> ");

that's what shows up in the box. and only for the .content selector!

in application.js i have:

$('a[rel*=facebox]').facebox(function($) {
   $.getScript(this.href);
});

in my controller:

 respond_to do |format|
    format.html # show.html.erb
    format.xml  { render :xml => @project }  
    format.js {render :layout => false} 
  end        

in my show.js.erb:

$('#facebox .content').html("<%= escape_javascript(render("spaces"))%>");