Rails 3 - Showing forms with errors inside modalbox

I am using modalbox for a modal window to submit forms that I learned from this Nettuts tutorial. Right now it works when creating a new client in my model just fine, even when there is an error in the form - it allows me to stay in the modalbox until the error is corrected. I would like to also use it to edit a client. Almost everything works to do that, except when the edit client form throws an error. Instead of staying inside the modalbox window like when adding a new client, it refreshes to another page to complete the form. Here is what I have for the new client feature that is working:

In my view:

<%= link_to 'New Client', new_client_path, :id => 'newclient-link' %>

In my ClientsController:

def create
@client = Client.new(params[:client])

respond_to do |format|
if @client.save
    format.js { render :redirect} #modal form redirection (redirect.js.erb)
    format.html { redirect_to(@clients, :notice => 'Client was successfully created.') }
    format.xml  { render :xml => @client, :status => :created, :location => @client }
  else
    format.html { render :new }
    format.js
    format.xml  { render :xml => @client.errors, :status => :unprocessable_entity }
  end
en开发者_开发百科d
end  

This is in the application.js file:

document.observe('dom:loaded', function() {
$('newclient-link').observe('click', function(event) {
    event.stop();
    Modalbox.show(this.href,
        {title: 'Add New Client',
        width: 500,
        afterLoad: function() {
            $('new_client').observe('submit', function(event) {
                event.stop();
                this.request();
            })
        }}
    );
});

})

And finally, this is in the create.js.erb that is supposed to keep the form inside the modalbox:

$('MB_content').update("<%= escape_javascript(render :partial => 'form') %>");
Modalbox.resizeToContent();
$('new_clients').observe('submit', function(event) {
event.stop();
this.request();
});

Now, having pasted all this, to replicate for the edit method, I duplicated the jquery in the application.js file and replaced "newclient-link" with "editclient-link" to match the link_to id in my edit link, and pretty much replicated the code for the create method in the controller and put it in the update method... However, I think this is where the problem lies. It seems like the solution should be simple and in the controller where ajax is supposed to be called to allow me to update the form in the modalbox even after throwing an error as it does with the new client link.

Any thoughts?

---

I solved my problem quite simply by using fancybox instead:

http://fancybox.net/howto

In my view the new user link and the edit user link open in the fancybox iframe. Upon completion of the form inside the iframe, even after errors are thrown and corrected, the iframe shows a designated success message and when closed or clicked outside of the iframe, the parent (main) page refreshes just like I wanted it to. After following the quick set up, here is the modified script to close the window and refresh upon submitting the form:

 $(document).ready(function() {
$("a.myfancy").fancybox({
    'transitionIn'  :   'fade',
    'transitionOut' :   'fade',
    'speedIn'       :   200, 
    'speedOut'      :   200, 
    'overlayShow'   :   true,
    'type'          :   'iframe',
    'onClosed'      :   function () {
        parent.location.reload(true);
        ;} 
   });

 }); /* Close main fancybox script */  

The :class ".myfancy" is the class of the link that opens the iframe. One thing I would like to know how to do is after the window closes and page refreshes, I would like to highlight the new row that was added to the table for a few seconds, then fade out. Does anyone know how to do that?

---

You could also check out air drop: https://github.com/xirukitepe/airdrop

this one is using bootstrap modal.