防止modal在选择后将数据保留在缓存中
prevent modal from keeping data in cache following select choice
在我的trick视图中,我从控制器查询中恢复,用户信息如下表所示:
<table id="userDataTables" class="display table-responsive" cellspacing="0" width="100%" style="font-size: 95%;">
<thead>
<tr>
<th>Username</th>
<th>id</th>
<th>Email</th>
<th>phone</th>
<th>Registered at</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for user in arrayuser %}
<tr>
<td>{{ user.username|capitalize }}</td>
<td>{{ user.id|capitalize }}</td>
<td>{{ user.emailCanonical }}</td>
<td>{{ user.phone }}</td>
<td>{{ user.createdAt|date("Y/m/d", "Europe/Paris") }}</td>
<td>
<select class="redirectSelect form-control">
<option value="" disabled selected style="font-weight: bold; font-style: italic; text-transform: lowercase; color: grey;">choisir une action</option>
<option value="{{ path('consumer_profile_edit', {'slug': user.slug }) }}">Edit Profile</option>
<option value="{{ path('index_admin_consumer_comment_pannel', {'slug': user.slug }) }}">Show comment(s)</option>
<option class="deleteInscription" value="#" data-href="{{ path('delete_user_process', {'id': user.id}) }}" data-toggle="modal" data-target="#consumerDeleteModal" style="font-weight: bold; color: #CF000F;">Delete user</option>
</select>
</td>
</tr>
{% endfor %}
</tbody>
</table>
正如你所看到的,我的表中每个用户行都有一个选择标签,如下所示:
<select class="redirectSelect form-control">
<option value="" disabled selected style="font-weight: bold; font-style: italic; text-transform: lowercase; color: grey;">choisir une action</option>
<option value="{{ path('consumer_profile_edit', {'slug': user.slug }) }}">Edit Profile</option>
<option value="{{ path('index_admin_consumer_comment_pannel', {'slug': user.slug }) }}">Show comment(s)</option>
<option class="deleteInscription" value="#" data-href="{{ path('delete_user_process', {'id': user.id}) }}" data-toggle="modal" data-target="#consumerDeleteModal" style="font-weight: bold; color: #CF000F;">Delete user</option>
</select>
只有当管理员选择"删除用户"时,我才会显示模式。
但是,事实上,模态保留了切换后的数据,所以即使我选择了一个不同的用户来删除,也不是正确的,因为我认为模态缓存。因此,我想找到一个解决方案来清除这个缓存,或者创建一个进程作为模式目标-正确的用户id并删除正确的用户。
编辑
模态始终保持我在看法例如,我返回一个包含20个用户的数组ID、姓名、电话、电子邮件等信息。。。etc按id ASC订购。
如果我选择id为5的用户,并且我想删除他,我的所有过程在我的php脚本中,关于删除其id之后的特定用户的查询运行良好。通过添加一个模态以防止此操作是永久性的,它总是删除第一个条目(因此删除id为1的第一个用户),而不是id为5的用户。
这是模态的html和脚本?
<div class="modal fade" id="consumerDeleteModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Delete user:</h4>
</div>
<div class="modal-body">
<div class="alert alert-warning">
<p> Warning <b> this action is permanent ! </p>
</div>
<div id="deleteConsumerForm">
<p> <b>Delete user permanently ?</b> </p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a alt="effacer consommateur">
<button id="confirmDeletion" type="button" class="btn btn-danger">Confirm</button>
</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript" charset="utf-8" async defer>
// manage modal on google chrome
$('.redirectSelect').on('change', function () {
var url = $(this).val();
if (url === "#") { // require a URL
console.log(url);
$('#consumerDeleteModal').modal()
} else if (url !== "#") {
console.log(url);
window.location = url;
} else {
return false;
}
});
// deleted function
$('#confirmDeletion').bind('click', function() {
var deleteTarget = $('.deleteInscription').attr('data-href');
if (deleteTarget == null){
console.log("failed !!!");
} else {
console.log("prepare to delete the user !!!");
$(this).attr('href', deleteTarget);
window.location.href = deleteTarget;
}
});
</script>
我该如何继续?
当您选择Delete选项时,您的代码不会告诉Modal要删除哪个用户。要解决此问题,请将deleteTarget
的声明移到顶部,并在用户选择Delete选项时填充它,如下所示:deleteTarget = $(this).children('.deleteInscription').attr('data-href');
演示:https://jsfiddle.net/BenjaminRay/t03jwgcd/
修订后的JavaScript:
<script type="text/javascript" charset="utf-8" async defer>
// manage modal on google chrome
var deleteTarget = '';
$('.redirectSelect').on('change', function () {
var url = $(this).val();
if (url === "#") { // require a URL
console.log(url);
$('#consumerDeleteModal').modal();
deleteTarget = $(this).children('.deleteInscription').attr('data-href');
} else if (url !== "#") {
console.log(url);
window.location = url;
} else {
return false;
}
});
// deleted function
$('#confirmDeletion').bind('click', function() {
if (deleteTarget == null){
console.log("failed !!!");
} else {
console.log("prepare to delete the user !!!");
$(this).attr('href', deleteTarget);
window.location.href = deleteTarget;
}
});
</script>
相关文章:
- 分派点击事件并保留击键修饰符
- 如何使用jquery强制一个单词更改大小写等以保留品牌
- 提交后保留下拉选择的值
- 如何在从浏览缓存加载页面时执行javascript
- 刷新后保留对网页的更改
- ReactJS和SpringDataRest缓存问题可能与websocket有关
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- 缓存谷歌地图数据
- Flash Uploadify在调用我的MVC控制器时没有保留会话/授权
- 当设置addFromAutocompleteOnly时,剩余文本将保留在输入字段中
- 使用递归属性迭代保留属性结构
- Jquery html() 和保留元素名称
- 如何将字符串拆分为字符,但在javascript中保留空格
- 防止jQuery Mobile中的ajax缓存
- 离开页面导航后保留文本区域内容
- image.onload事件和浏览器缓存
- Javascript清除缓存以清除基本身份验证凭据
- 使用jquery.load('pageName')方法时,未从应用程序缓存加载Html页
- 防止modal在选择后将数据保留在缓存中
- 图像元素的缓存内容在删除并再次添加后保留在浏览器中