創建操作後，軌道中的模態窗口？

Question

因此，我想在我的網站中創建活動或用戶之後，或在編輯某些內容後顯示模態消息，到目前爲止，我只知道如何使用Flash來顯示小消息，但我想知道如何使用模態窗口來做到這一點，並且它們只在使用控制器中的特定方法後才顯示出來，完全像一個閃光消息，但是在模態窗口中。

我已經調查過此事，並發現format.html和format.js 似乎做的伎倆，但我有點不知道如何正確使用它們。

Answer 1

你可以用一個實例變量像@ObjectCreated和訪問它在view.erb文件，這樣做

<％，如果@objectCreated％> 插入HTML模態 <％結束％>。

然後假設你的頁面刷新使用一個dom加載的javascript函數來打開模式。

Answer 2

假設您已經有模態HTML。

<% if flash[:event] == true %> 
    <script>$(function() { $('#modal-id'}.modal('show'); });</script> 
<% end %> 

Answer 3

這個工作對我來說

，如果你有模態在部分則呈現在您的看法：

<%= render 'your_partial' %>

然後：

`<% if flash[:notice].present? %> 
    <script> 
     $(document).ready(function(){ 
     $('#myModal').modal("show"); 
     }); 
    </script> 
<% end %>` 

Answer 4

好，嘗試完整的解決方案

步驟1

創建局部layouts/_modal.html.erb

<div class="modal fade" id="myModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="myModalLabel">Alert</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="container"> 
        <div class="row"> 
          <div class="col-md-12"> 
           <div class="alert-message <%="#{name}" %>-message"> 
            <p><%= msg %></p> 
            <i class="icofont icofont-close"></i> 
           </div> 
          </div> 
         </div> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

步驟2

則控制器創建或更新動作

flash[:success] = 'Category was successfully created.' 
OR 
flash[:danger] = 'Ooops! something went wrong' 

小號TEP 3

在layouts/application.html.erb

<% flash.each do |name, msg| %> 
    <%= render partial: "layouts/modal" %> 
<% end %> 

步驟4

在頁腳

<script> 
    $('#myModal').modal('show') 
</script> 

或者您可以使用在閃存部分或外部JS文件

這是測試和工作完美

希望它可以幫助