對話框在頁面刷新後顯示爲div

Question

我正在嘗試創建單個頁面CRUD。 現在，我遇到了show函數的一些錯誤。

應用的例子可以在這裏找到： http://tryoutcreation.herokuapp.com/

這似乎工作好嗎。 創建後，如果頁面未刷新，則show函數將正常工作。

但是，如果它被刷新，對話框將停止作爲對話框工作，並只顯示爲div。

您可以通過創建用戶並單擊顯示功能來嘗試。然後嘗試刷新頁面，相同的div將僅顯示在頁面上而不是對話框中。

源可以在這裏找到： https://github.com/frozzie/ModalCrud

相關代碼：

的對話框顯示形式。

<tr id = "<%= dom_id user%>"> 
<td><%= user.user_name %></td> 
<td><%= user.email %></td> 
<td><%= user.password %></td> 
<td><%= user.account_type %></td> 
<td><%= link_to 'Show', user, :remote=>true%></td> 
<td><%= link_to 'Edit', edit_user_path(user), :remote => true %></td> 
<td><%= link_to 'Destroy', user, :remote => true, method: :delete, data: { confirm: 'Are you sure?' } %> 
</td> 
<div id = "show-form" title="User Information"> 
    <p> 
    <b>User name:</b> 
    <%= user.user_name %> 
    </p> 

    <p> 
    <b>Email:</b> 
    <%= user.email %> 
    </p> 

    <p> 
    <b>Password:</b> 
    <%= user.password %> 
    </p> 

    <p> 
    <b>Account type:</b> 
    <%= user.account_type %> 
</p> 
</div> 
</tr> 

它應該只在點擊顯示按鈕時打開。 $（「＃show-form」）。dialog（「open」）;

這是對話框。

$("#show-form").dialog({ 
     autoOpen: false, 
     height: 400, 
     width: 350, 
     modal: true, 
     closeOnEscape: true, 
     resizable:false, 
     buttons: { 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }) 

任何關於爲什麼發生的想法將不勝感激。

Answer 1

這對你的js比你的php少。

從代碼中刪除此：

 <div id = "show-form" title="User Information"> 
     <p> 
     <b>User name:</b> 
     <%= user.user_name %> 
     </p> 

     <p> 
     <b>Email:</b> 
     <%= user.email %> 
     </p> 

     <p> 
     <b>Password:</b> 
     <%= user.password %> 
     </p> 

     <p> 
     <b>Account type:</b> 
     <%= user.account_type %> 
     </p> 
     </div> 

再看看輸出用戶的信息正確。不要只在頁面頂部輸出。

 <tr id = "<%= dom_id user%>"> 
      <td><%= user.user_name %></td> 
      <td><%= user.email %></td> 
      <td><%= user.password %></td> 
      <td><%= user.account_type %></td> 
      <td class="click_me" data-id="<%= dom_id user%>"><%= link_to 'Show', user, :remote=>true%></td> 
      <td><%= link_to 'Edit', edit_user_path(user), :remote => true %></td> 
      <td><%= link_to 'Destroy', user, :remote => true, method: :delete, data: { confirm: 'Are you sure?' } %> 
      </td> 
     </tr> 
     <tr style="display: none;" class="hidden_<%= dom_id user%>"> 
     <td colspan="8"> 

     <div class = "show-form" title="User Information"> 
     <p> 
     <b>User name:</b> 
     <%= user.user_name %> 
     </p> 

     <p> 
     <b>Email:</b> 
     <%= user.email %> 
     </p> 

     <p> 
     <b>Password:</b> 
     <%= user.password %> 
     </p> 

     <p> 
     <b>Account type:</b> 
     <%= user.account_type %> 
     </p> 
     </div> 
</td> 
</tr> 

JS

現在，

$('td').on('click','.click_me', function(){ 
     var id = $(this).data('id'); 
     $('.hidden_'+id).slideToggle(); 
}); 

這是不完美的...笑以任何手段，但至少你可以用它希望的工作。