Wyświetl błędy inline za pomocą simple_form w modalnym Bootstrap Ajax
Znalazłem podobne pytania dotyczące StackOverflowtutaj itutaj ale wciąż nie mogę tego zrobić.
Używam Rails 3.2.8, SimpleForm 2.0.4 i Twitter Bootstrap 2.1.1 (przez bootstrap-sass gem 2.1.1.0).
Użytkownik powinien mieć możliwość dodania kontaktu z modalnego okna podręcznego. Jeśli występują błędy sprawdzania poprawności, powinny pojawić się w wierszu, tak jakby użytkownik korzystał z niemodalnej wersji formularza (czerwone obramowanie wokół pola, komunikat o błędzie obok pola).
Ładuję modal w ten sposób:
<a data-toggle="modal" data-target="#new-contact-modal">Go modal!</a>
Oto modal Bootstrap, który wywołuje to samocontacts/contact_fields
częściowe używane w wersji niemodalnej.app / views / contacts / _new_modal.html.erb:
<div id="new-contact-modal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="new-contact-modal-label"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3 id="new-contact-modal-label"><%= t("contacts.new.header") %></h3>
</div>
<%= simple_form_for(@contact,
:remote => true,
:html => {:class => "form-horizontal",
"data-type" => :json }) do |contact_form| %>
<div id="new-contact-body" class="modal-body">
<%= render 'contacts/contact_fields', :f => contact_form %>
</div>
<div class="modal-footer">
<%= contact_form.submit :class => "btn btn-primary",
:"data-loading-text"=> ('simple_form.creating') %>
<%= t('simple_form.buttons.or') %>
<a data-dismiss="modal" aria-hidden="true">
<%= t('simple_form.buttons.cancel') %>
</a>
</div>
<% end %>
</div>
app / controllers / contacts_controller.rb (celowo skomentowałformat.json
line, ponieważ próbuję wysłać cały zwrot modalny za pomocą JavaScript):
def create
@contact = Contact.new(params[:contact])
<...some additional processing...>
respond_to do |format|
if @contact.save
format.html { flash[:success] = "Contact added."
redirect_to @contact }
format.json { render json: @contact, status: :created, location: @contact}
else
format.html { render action: "new" }
#format.json { render json: @contact.errors, status: :unprocessable_entity }
format.js { render 'new_modal_error' }
end
app / views / contacts / new_modal_error.js.erb
var modal = "<%= escape_javascript(render :partial => 'contacts/new_modal', :locals => { :contact => @contact.errors }) %>";
$("#new-contact-modal").html($(modal));
app / assets / javascripts / contacts.js Niektóre JQuery, aby zresetować formularz i zamknąć modal na sukces.
$(function($) {
$("#new_contact")
.bind("ajax:success", function(event, data, status, xhr) {
// http://simple.procoding.net/2008/11/22/how-to-reset-form-with-jquery :
$(this).each(function(){
this.reset();
});
$("#new-contact-modal").modal("hide");
})
});
Dobrą wiadomością jest to, że działa, gdy formularz nie zawiera błędów: kontakt jest dodawany, a modal jest ukryty. Jednak jeśli tam jestsą błędy sprawdzania poprawności, otrzymuję komunikat „JSON.parse: nieoczekiwany znak”. Pochodzi z jquery.js, wiersz 515, który jestreturn
oświadczenie w tym fragmencie:
// Attempt to parse using the native JSON parser first
if ( window.JSON && window.JSON.parse ) {
return window.JSON.parse( data );
}
Jeśli sprawdzędata
, Widzę, że to jest treść mojejnew_modal_error.js
plik, w pełni rozwinięty z błędami formularza, i uciekł do JavaScript. Ale to nie jest JSON.
czego mi brakuje? Jak mogę przetworzyć stronęnew_modal_error.js
jako plik JavaScript, a nie zmienna JSON? A może jest to łatwiejszy sposób, aby sobie z tym poradzić?