Rails create new entry via bootstrap modal (or similarly with lightbox) - ruby-on-rails-3

Question

I would like to include in a new page a modal that can create "on the fly" an entry of another model and refresh a select with new entry without refreshing the page.
The first attemp I do is something like this:
The page that raise the modal (ok, it raises correctly the form of the other model)
#new.html.erb
<%= simple_form_for(#odl) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.collection_select :client_id, Client.order("LOWER(last_name) ASC"), :id, :last_name_and_name_and_company, :prompt => "Select a client" %>
Create new client
#...some code...
#...and the modal that raise correctly
<div id="client_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="client_modal_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="client_modal_label">Create a new client</h3>
</div>
<div class="modal-body">
<% #client = Client.new %>
<%= render :partial => "clients/form" %>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Create Client</button>
</div>
</div>
I would like that if some input in the new client form are wrongs, it appears on the fly in the modal and not in a new "classic" page.
The Client.new controller is the following:
#clients_controller
def create
#create new client
if save
redirect_to to_a_path, :notice => "Client created successfull!"
else
flash[:error] = "Error!"
render :action => "new"
end
end
The solutions that I think can be followed:
1. render a partial like the example above, but I don't know how to "stay" in the modal when errors accours (how can I stay in the modal? -> I have tried with client_validation but seems that doesn't work correctly..)
2. make the modal-body as an <iframe> that loads the new_client_path
3. ...
Which one is the best?

Answer 1

After some tricks I have found a working solution:
The view of the modal controller:
<div id="client_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="client_modal_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="client_modal_label">Create new client</h3>
</div>
<div class="modal-body">
<%= simple_form_for Client.new, html: {"data-type" => :json}, remote: true do |f| %>
<div id="error_explanation" style="display:none;">
</div>
<div class="form-inputs">
# the inputs
# ... and "closing" the modal
The client_controller.create:
def create
# save the data
if #client.save
respond_to do |format|
format.html { redirect_to anagrafe_index_path, :notice => "Client create!"}
format.json { render json: #client, status: :created, location: #client }
end
else
respond_to do |format|
format.html { render :action => 'new'}
format.json { render json: #client.errors.full_messages, status: :unprocessable_entity }
end
end
end
The js.coffee where the modal is raised:
$ ()->
$("form.new_client").on "ajax:success", (event, data, status, xhr) ->
$("form.new_client")[0].reset()
$('#client_modal').modal('hide')
# refreshing the select
$('#error_explanation').hide()
$("form.new_client").on "ajax:error", (event, xhr, status, error) ->
errors = jQuery.parseJSON(xhr.responseText)
errorcount = errors.length
$('#error_explanation').empty()
if errorcount > 1
$('#error_explanation').append('<div class="alert alert-error">The form has ' + errorcount + ' errors.</div>')
else
$('#error_explanation').append('<div class="alert alert-error">The form has 1 error.</div>')
$('#error_explanation').append('<ul>')
for e in errors
$('#error_explanation').append('<li>' + e + '</li>')
$('#error_explanation').append('</ul>')
$('#error_explanation').show()