如何在 Ruby on Rails 5.2 中将来自不同 controller 的视图渲染为模态 window？

Question

My application implements a Sumit/Approve/Reject workflow upon Skills. When a Skill is rejected, it creates a notification of which the reason should be input by the user through a modal window. Unfortunately, I am not comfortable with front-end development, and the modal window does not show up: it is not generated in the html output of the page. Here is the code I wrote:

1 - Skills controller creates a notification when the Reject button (in the Skill's Show view) is hit, and tries to render the notifications_edit_description_form.html.erb partial of the Notifications controller (which uses the @notification variable).

  def reject
    puts "-------------------------------------------------------"
    puts "------------------ REJECTED ---------------------------"
    puts "-------------------------------------------------------"
    @skill.reject!
    @skill.update_attribute(:status_id, statuses.find { |x| x["code"] == "REJECTED" }.id || 0)
    @notification = Notification.create(playground_id: current_playground, description: t('SkillRejected'), severity_id: options_for('rules_severity').find { |x| x["code"] == "CORRECTION" }.id || 0,
    status_id: statuses.find { |x| x["code"] == "NEW" }.id || 0, expected_at: Time.now + 1.day, responsible_id: @skill.parent.parent.reviewer_id, owner_id: current_user.id, created_by: current_login, updated_by: current_login,
    topic_type: @skill.class.name, topic_id: @skill.id, deputy_id: @skill.parent.parent.responsible_id, organisation_id: @skill.organisation_id, code: @skill.code, name: t('SkillRejected'))
    # Create title and description for current language
    @notification.name_translations.create(field_name: 'name', language: current_language, translation: "#{t('Skill')} #{@skill.code} #{@skill.workflow_state}")
    @notification.description_translations.create(field_name: 'description', language: current_language, translation: "#{format_datetime(Time.now)} #{current_user.name} :\n> #{t('SkillRejected')}")
    render partial: 'notifications/edit_description_form', data: { toggle: "modal", target: "#editNotificationModal" }
  end

2 - The notifications_edit_description_form.html.erb partial is:

<%= form_with model: @notification, html: {id: "edit_description_form"} do |f| %>

  <div class="modal-header">
    <h5 class="modal-title" id="editNotificationModalLabel">
      <% if content_for?(:notificationModalTitle) %>
        <%= yield(:notificationModalTitle) %>
      <% else %>
        <%= t('EditNotification') %>
      <% end %>
    </h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

    <%= render partial: "shared/error_list", locals: { errors: @notification.errors } %>

    <fieldset>
      <div class="row mat-form-row">
        <div class="mat-form-field col-md-4">
          <%= f.label :notification_severity_id, t('NotificationSeverity'), class: "mat-form-field-label" %>
          <%= f.collection_select :severity_id, options_for('rules_severity') , :id, :name, {}, { class: "mat-input-element" } %>
        </div>
        <div class="mat-form-field col-md-4">
          <label for="notification-issuer" class="mat-form-field-label">
            <%= t('Issuer') %>
          </label>
          <input id="notification-issuer" class="mat-input-element" readonly
            value="<%= @notification.owner.name %>" />
        </div>
        <div class="mat-form-field col-md-4">
          <%= f.label :notification_expected_at, t('NotificationDueDate'), class: "mat-form-field-label" %>
          <%= f.date_field :expected_at, { class: "mat-input-element" } %>
        </div>
      </div>
      <div class="row mat-form-row">
        <div class="mat-form-field col-md-4">
          <%= render partial: "shared/translated_field_form", locals: {
            f: f,
            field: "description",
            fields: :description_translations,
            translations: @notification.description_translations,
            isTextarea: true,
            smallTextarea: true,
            label: t('Description') } %>
        </div>
      </div>
    </fieldset>
  </div>

  <div class="modal-footer">
    <button type="button" class="mat-stroked-button mat-button-base" data-dismiss="modal">
      <%= t('Cancel') %>
    </button>
    <button class="mat-flat-button mat-button-base mat-primary">
      <%= t('Submit') %>
    </button>
  </div>

<% end %>

3 - The target is defined in the Skill's Show view.

<!-- Notification Modal -->
<aside class="modal fade modal-remote" id="editNotificationModal" tabindex="-1" role="dialog" aria-labelledby="editNotificationModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content"></div>
  </div>
</aside>

4 - The console reports that the partial has been rendered:

  Rendered notifications/_edit_description_form.html.erb (67.1ms)

What did I miss? Where is my modal gone, and how to solve this?

Thanks a lot for your help!

Answer 1

The solution I found may not be optimum, but this works: from the Show view, link to new Notification path with modal target actually opens the notification in the modal window.

        <%= link_to t('Reject'), new_notification_path(
                                  playground_id: current_playground,
                                  description: t("#{this_object.class.name}#{'Rejected'}"),
                                  severity_id: options_for('rules_severity').find { |x| x["code"] == "CORRECTION" }.id || 0,
                                  status_id: statuses.find { |x| x["code"] == "NEW" }.id || 0,
                                  expected_at: Time.now + 1.day,
                                  responsible_id: this_object.owner_id,
                                  owner_id: current_user.id,
                                  created_by: current_login,
                                  updated_by: current_login,
                                  topic_type: this_object.class.name,
                                  topic_id: this_object.id,
                                  deputy_id: this_object.parent.responsible_id,
                                  organisation_id: this_object.organisation_id,
                                  code: this_object.code,
                                  name: t("#{this_object.class.name}#{'Rejected'}")
                                    ),
                                  title: t('Reject'), data: { 
                                  toggle: "modal", target: "#editNotificationModal" 
                                  }, class: "mat-stroked-button mat-button-base mat-primary" %>

When the notification modal window closes, the Skill show view is still available.