保存数据之前实现模态

Question

我正在开发一个应用程序，管理员可以在其中向公众发布欢迎消息。 基本上，在发布“发布到公共页面”后，我需要在发布消息之前实现模式，该警告说“您将在公共状态页面上将此内容发布给世界。所有互联网用户都可以看到它，而不仅仅是您的同事。单击“确定”以发布或“取消”以返回。

在我单击发布的阶段，直接保存了欢迎消息时，我在显示模式时遇到了困难。

这是我的代码：

  <div class="row" id="notice-edit-container" style="display: none;">
    <div class="col-lg-12">
      <div class="ibox">
        <div class="ibox-content">
          <i><%= t('statusx.guide_text')%></i><br />
          <form accept-charset="UTF-8" class="message-form" action="<%= public_page_path %>" method="post" data-image-path="<%= upload_image_noticeboards_path %>">
            <textarea class="noticeEditor" name="content" style="width: 100%; height:340px;">
              <%= @welcome_message %>
            </textarea>
            <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
            <%= hidden_field_tag :_method, "put" %>
            <%= t('statusx.public_page_link')%>
            <%= link_to "https://demo.getvetter.com/public", target: :_blank %>
            <br>
            <br>
            <button type="submit"
            class="btn btn-primary tn-w-m"
            data-toggle="modal"
            data-target="#approvalMessageModal">
            <%= t('statusx.save') %></button>
            <button id="cancel_submit" class="btn btn-default btn-w-m"><%= t('cancel') %></button>
          </form>
        </div> <!-- end ibox-content -->
      </div> <!-- end ibox -->
    </div>
  </div>

<!-- Modal -->
<div id="approvalMessageModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="approvalMessageModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  </div>
  <div class="modal-body">
    <p><%= t('statusx.popup.warning') %></p>
  </div>
  <div class="modal-footer">
      <button type="button" class="notice-read-ok btn btn-primary btn-block"  data-dismiss="modal"><%= t('ok') %></button>
      <button id="cancel_submit" class="btn btn-default btn-w-m"><%= t('cancel') %></button>
  </div>
</div>

    // Warning modal before publish welcome message

$(document).ready(function () {
  $('#approvalMessageModal').modal('show');
});

我很感谢您的帮助显示模式并保存数据。 多谢

Answer 1

从表单内的按钮中删除提交类型，然后单击按钮弹出模式框。
并在模态框中的确定按钮的动作上提交表格。

<div class="row" id="notice-edit-container" style="display: none;">
    <div class="col-lg-12">
      <div class="ibox">
        <div class="ibox-content">
          <i><%= t('statusx.guide_text')%></i><br />
          <form accept-charset="UTF-8" id='myForm' class="message-form" action="<%= public_page_path %>" method="post" data-image-path="<%= upload_image_noticeboards_path %>">
            <textarea class="noticeEditor" name="content" style="width: 100%; height:340px;">
              <%= @welcome_message %>
            </textarea>
            <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
            <%= hidden_field_tag :_method, "put" %>
            <%= t('statusx.public_page_link')%>
            <%= link_to "https://demo.getvetter.com/public", target: :_blank %>
            <br>
            <br>
            <button
            class="btn btn-primary tn-w-m"
            id='saveButton'
            >
            <%= t('statusx.save') %></button>
            <button id="cancel_submit" class="btn btn-default btn-w-m"><%= t('cancel') %></button>
          </form>
        </div> <!-- end ibox-content -->
      </div> <!-- end ibox -->
    </div>
  </div>

<!-- Modal -->
<div id="approvalMessageModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="approvalMessageModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  </div>
  <div class="modal-body">
    <p><%= t('statusx.popup.warning') %></p>
  </div>
  <div class="modal-footer">
      <button type="button" class="notice-read-ok btn btn-primary btn-block"  data-dismiss="modal" id='submitForm'><%= t('ok') %></button>
      <button id="cancel_submit" class="btn btn-default btn-w-m"><%= t('cancel') %></button>
  </div>
</div>

$(document).ready(function () {
  $('#saveButton').on('click', function() {
    $('#approvalMessageModal').modal('show');
    return false;
  });
  $('#submitForm').on('click', function() {
    $('#myForm').submit();
  });
});

我尚未测试代码。希望这会给您一个主意。