0

I want to display an error message inside the modal below the form. I feel like I've read the whole internet and haven't found an answer. Here is my code:

#notes_controller.rb
  def new
    @note = Note.new

    respond_to do |format|
      format.html
      format.js
    end
  end

  def create
    @note = Note.new(note_params)

    respond_to do |format|
      if @note.save
        format.html { redirect_to history_registrant_path(@registrant) }
      else
        format.html { render partial: 'new_modal' }
      end
    end
  end

View:

#new_modal.html.erb

<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">
      Note for <%= @registrant.email %>
    </h4>
  </div>
  <div class="modal-body">
    <%= form_for @note, :url => registrant_notes_path(@registrant), remote: true do |f| %>
      <div class="text-note">
        <%= f.label :body, 'Add note' %>
        <%= f.text_area :body, maxlength: 1000, id: "review_text" %>
        <p class='error'><%= show_errors(@note, :body) %></p>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <%= f.submit "Save", class: "btn btn-primary" %>
      </div>
    <% end %>
  </div>
</div>

Error helper:

  def show_errors(object, field_name)
    if object.errors.any?
      if !object.errors.messages[field_name].blank?
        object.errors.messages[field_name].join(", ")
      end
    end
  end

Now e.g. when I'm trying to save new Note without body it should show a validation error can't be blank but it renders a new modal instead without any information. The server logs showed this:

   (0.5ms)  ROLLBACK
  Rendered notes/_new_modal.html.erb (21.9ms)
Completed 200 OK in 629ms (Views: 26.6ms | ActiveRecord: 17.1ms)

What did I miss?

Raju Ahmed
  • 1,282
  • 5
  • 15
  • 24
mr_muscle
  • 2,536
  • 18
  • 61
  • your partial is being rendered, without any information about the failed object. – Abhinay Jan 12 '22 at 03:51
  • If you submit form with "remote: true", expected response format is JS. That means that you should add "format.js" in you controller response and add a partial render logic in create.js.erb view – Toni Jan 12 '22 at 07:46
  • @Toni I added format.js into controller and `create.js.erb` inside the views with logic: `$("#error").html("<%= show_errors(@note, :body) %>");` and still nothing. The only difference is that server logs shows `(0.2ms) ROLLBACK Rendering notes/create.js.erb Rendered notes/create.js.erb (0.5ms)` – mr_muscle Jan 12 '22 at 09:16
  • @mr_muscle Have you tried with `$("#error").html("replaced with dummy text");` in order to see if this get's executed properly and replaces the element HTML. You should also wrap rails things in js.erb view: https://stackoverflow.com/questions/1620113/why-escape-javascript-before-rendering-a-partial Also, check the browser console for errors. :) – Toni Jan 13 '22 at 10:18

0 Answers0