Rails4 + bootstrap3 modal form to a different model not displaying ajax errors - ajax

Question

I'm using an example from Eric London http://ericlondon.com/2014/03/13/rails-4-submit-modal-form-via-ajax-and-render-js-response-as-table-row.html
And have adapted it slightly to my scenario:
While editing a Team (model) I want to pop a modal form to Add a new User. I can get this working i.e. when all fields are correct, the record is saved and the modal closes, but I am not getting errors back into the modal when there is a problem.
I also am uncertain how to structure the Create controller action correctly - this is definitely not right.
In the Users controller, create action (below) I can save the record as I expect, I have commented out the original code (I still need this - its the defaults for normal user management)
def create
#if params[:modal].nil? || params[:modal] == ''
# create! { users_url }
#else
respond_to do |format|
password = Devise.friendly_token.first(6)
#user.password = password
#user.password_confirmation = password
#user.external = true
if #user.save!
format.js { render action: 'show', status: :created, location: #user }
else
format.js { render json: #user.errors, status: :unprocessable_entity }
end
end
#end
end
the show.js.erb view
$('#new_user_modal').modal_success();
and the application.js code:
$(document).ready(function(){
$(document).bind('ajaxError', 'form#new_user', function(event, jqxhr, settings, exception){
// note: jqxhr.responseJSON undefined, parsing responseText instead
$(event.data).render_form_errors( $.parseJSON(jqxhr.responseText) );
});
});
(function($) {
$.fn.modal_success = function(){
// close modal
this.modal('hide');
// clear form input elements
// todo/note: handle textarea, select, etc
this.find('form input[type="text"]').val('');
// clear error state
this.clear_previous_errors();
};
$.fn.render_form_errors = function(errors){
$form = this;
this.clear_previous_errors();
model = this.data('model');
// show error messages in input form-group help-block
$.each(errors, function(field, messages){
$input = $('input[name="' + model + '[' + field + ']"]');
$input.closest('.form-group').addClass('has-error').find('.help-block').html( messages.join(' & ') );
});
};
$.fn.clear_previous_errors = function(){
$('.form-group.has-error', this).each(function(){
$('.help-block', $(this)).html('');
$(this).removeClass('has-error');
});
}
}(jQuery));
in the teams form I have the link and the modal definition:
<%# Added Bootstrap data modal attribute %>
<%= link_to 'Add an External User', '#new_user_modal', 'data-toggle' => 'modal', class: 'btn btn-default' %>
<%# Bootstrap modal markup. #see: http://getbootstrap.com/javascript/#modals %>
<div class="modal fade" id="new_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Create new User</h4>
</div>
<div class="modal-body">
<%# Render the new person form (passing modal => true to enable remote => true) %>
<%= render 'users/new', modal: true %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
in the users/_new.html.erb view I have:
<% #user = User.new %>
<%= simple_form_for #user, remote: true, input_html: {role: :form, 'data-model' => 'user'} do |f| -%>
<% if #user.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% #user.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<fieldset>
<!-- username -->
<%= f.input :remote_id, label: "Payroll Code / Username" %>
<!-- basic settings -->
<div class="row">
<div class="col-md-6">
<%= f.input :first_name %>
</div>
<div class="col-md-6">
<%= f.input :last_name %>
</div>
</div>
<%= f.input :email %>
</fieldset>
<div class="actions">
<%= f.submit 'Submit', class: 'btn btn-primary' %>
</div>
<% end -%>
So, to sum up where I am at:
I want to add new users from a modal form while editing another
model
The approach above mostly works...
But is heinously ugly - it
feels wrong/messy and I am not happy with it.

Answer 1

It seems you don't have any 'help-block' classes on your form.
Try:
$.each(errors, function(field, messages){
$input = $('input[name="' + model + '[' + field + ']"]');
$span_error = $("<span></span>").addClass('help-block').html( messages.join(' & ') );
$form_input = $input.closest('.form-group').addClass('has-error').find('.form-control');
$span_error.insertAfter($form_input);
});
Instead of:
// show error messages in input form-group help-block
$.each(errors, function(field, messages){
$input = $('input[name="' + model + '[' + field + ']"]');
$input.closest('.form-group').addClass('has-error').find('.help-block').html( messages.join(' & ') );
});