我正在尝试创建单页 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( "打开");
这是对话框。
$( "#show-form" ).dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
closeOnEscape: true,
resizable:false,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
}
})
任何关于为什么会发生这种情况的想法将不胜感激。
最佳答案
这与你的 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();
});
这并不完美......无论如何,哈哈,但至少你可以希望使用它。
关于javascript - 页面刷新后对话框显示为 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13931723/