将参数发送到模态,然后删除行 [英] send parameter to a modal and then deleting row
问题描述
经过2天的研究,我决定寻求帮助,因为我无法继续前进.
After 2 days of researching i decided to ask for some help because i can't move on.
我在我的站点中显示一个用户表.每行都有用户的数据和一个删除用户按钮.
I display a users table in my site. Each row has user's data and a delete user button.
如果按Delete(删除)按钮,则必须显示一个模式,询问您是否要删除该特定用户.这就是为什么我必须发送一个名为用户名的参数的原因.
If you press on delete button, a modal has to show up asking you if you want to delete that certain user. That is why i have to send a parameter that is the username.
该模式是带有图例的确认模式:您确定要删除//username//吗?
That modal is a confirm modal with the legend: Are you sure you want to delete //username//?
问题是我知道如何发送参数,但无法将其与jquery删除功能集成.另外,由于我真的是js和jquery的新手,所以对于如何删除行也没有一个很明确的想法.
The thing is that i know how to send the parameter but can't integrate it with jquery deletion function. Also don't have a very clear idea of how to delete a row since i'm really newbie with js and jquery.
到目前为止,这就是我所拥有的(请注意,我正在使用Smarty模板引擎):
So far this is what i have (please notice that im using Smarty template engine):
<tbody>
{foreach $frontusers as $frontuser}
<tr>
{if $frontuser->frontavatar_id eq null}
<td><img src="{site_url()}assets/img/avatar.png" alt="" /></td>
{else}
<td><img src="{site_url()}assets/img/avatar1.jpg" alt="" /></td>
{/if}
<td class="hidden-phone">{$frontuser->username}</td>
<td>{$frontuser->name}</td>
<td>{$frontuser->lastname}</td>
<td class="hidden-phone">{$frontuser->email}</td>
<td class="hidden-phone">{$frontuser->state}</td>
<td class="hidden-phone">{$frontuser->creation_date|date_format:"%Y/%m/%d"}</td>
{if $frontuser->status eq 2}
<td ><span class="label label-success">Activo</span></td>
{else}
<td ><span class="label label-warning">No Activo</span></td>
{/if}
<td><a class="btn mini blue-stripe" href="{site_url()}admin/editFront/{$frontuser->id}">Modificar</a></td>
<td><a href="#" data-id="{$frontuser->id}" class="btn mini red-stripe confirm-delete" role="button">Delete</a></td>
</tr>
<!-- modal -->
<div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel3">Delete</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to delete user ....?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button data-dismiss="modal" class="btn red" id="btnYes">Confirm</button>
</div>
</div>
<!-- end modal -->
{foreachelse}
<tr>
<td colspan="2"><span class="text-error"><i class="icon-exclamation"></i> No hay Usuarios cargados.</span></td>
</tr>
{/foreach}
</tbody>
这是我的js文件(我从此链接获得)
this is my js file (i got it from this link )
$('#myModal3').on('show', function() {
var id = $(this).data('id'),
removeBtn = $(this).find('.red');
})
$('.confirm-delete').on('click', function(e) {
e.preventDefault();
var id = $(this).data('id');
$('#myModal3').data('id', id).modal('show');
});
$('#btnYes').click(function() {
// handle deletion here
var id = $('#myModal3').data('id');
$('[data-id='+id+']').remove();
$('#myModal3').modal('hide');
});
因此,总而言之,我需要修改我的代码以执行以下操作:
So, to sum up i need to adapt my code to do the following:
- 将用户名作为参数发送给模式
- 如果按下确认按钮,则删除整行
更新:
模态正在工作,我是说,它打开和关闭.模式的确认"按钮只会从该行中删除删除按钮",而不是整个行.
The modal is working, i mean, it opens and closes. modal's Confirm button only deletes "delete button" from the row, not the entire row.
推荐答案
最后可以使它起作用.这里是此版本的简短版本(没有ajax,聪明的用户和受过骚扰的用户),可以在线上正常工作:
Finally could make it work. here a short version of this (without ajax and smarty and harcoded users) online and working:
查看:
<tbody>
{foreach $frontusers as $frontuser}
<tr>
{if $frontuser->frontavatar_id eq null}
<td><img src="{site_url()}assets/img/avatar.png" alt="" /></td>
{else}
<td><img src="{site_url()}assets/img/avatar1.jpg" alt="" /></td>
{/if}
<td class="hidden-phone">{$frontuser->username}</td>
<td>{$frontuser->name}</td>
<td>{$frontuser->lastname}</td>
<td class="hidden-phone">{$frontuser->email}</td>
<td class="hidden-phone">{$frontuser->state}</td>
<td class="hidden-phone">{$frontuser->creation_date|date_format:"%Y/%m/%d"}</td>
{if $frontuser->status eq 2}
<td ><span class="label label-success">Activo</span></td>
{else}
<td ><span class="label label-warning">No Activo</span></td>
{/if}
<td><a class="btn mini blue-stripe" href="{site_url()}admin/editFront/{$frontuser->id}">Edit</a></td>
//here in data-title i store the username so later i can "catch it" in the jquery function
<td><a href="#" class="confirm-delete btn mini red-stripe" role="button" data-title="{$frontuser->username}" data-id="{$frontuser->id}">Delete</a></td>
</tr>
<!-- modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel3">Delete</h3>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button data-dismiss="modal" class="btn red" id="btnYes">Confirmar</button>
</div>
</div>
<!-- end modal -->
{foreachelse}
//no users are in the db
<tr>
<td colspan="2"><span class="text-error"><i class="icon-exclamation"></i> No hay Usuarios cargados.</span></td>
</tr>
{/foreach}
</tbody>
Js文件:
//after first function is triggered, modal shows and this function runs
$('#myModal').on('show', function() {
//catch the id for later deletion, and username to display on modal
var id = $(this).data('id'),
username = $(this).data('usern');
$('#myModal .modal-body p').html("Do you want to delete user: " + '<b>' + username + '</b>' + ' ?');
})
//when clicking "delete" button from a row, this is the first function that runs
$('.confirm-delete').on('click', function(e) {
e.preventDefault();
//catch the user id and username
var id = $(this).data('id');
var user = $(this).data('title');
//assign to the modal id and username
$('#myModal').data('id', id).modal('show');
$('#myModal').data('usern', user).modal('show');
});
$('#btnYes').click(function() {
var id = $('#myModal').data('id');
//sending to php the row to be deleted from the db
$.ajax({
url: 'deleteFrontUser',
type: 'POST',
data: 'id='+id,
success: function(html){
//removing entire row
$('[data-id='+id+']').parents('tr').remove();
$('#myModal').modal('hide');
}
});
return false;
});
这篇关于将参数发送到模态,然后删除行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!