将参数发送到模态然后删除行

经过2天的研究,我决定寻求一些帮助,因为我无法继续前进。

我在我的网站中显示用户表。 每行都有用户数据和删除用户按钮。

如果按下删除按钮,则必须显示模式,询问您是否要删除该特定用户。 这就是为什么我必须发送一个用户名参数。

该模态是图例的确认模式:您确定要删除//用户名//?

问题是我知道如何发送参数但不能将其与jquery删除function集成。 也不清楚如何删除行,因为我真的是js和jquery的新手。

到目前为止这是我的(请注意我使用Smarty模板引擎):

 {foreach $frontusers as $frontuser}  {if $frontuser->frontavatar_id eq null}  {else}  {/if} {$frontuser->username} {$frontuser->name} {$frontuser->lastname} {$frontuser->email} {$frontuser->state} {$frontuser->creation_date|date_format:"%Y/%m/%d"} {if $frontuser->status eq 2} Activo {else} No Activo {/if} id}">Modificar id}" class="btn mini red-stripe confirm-delete" role="button">Delete     {foreachelse}   No hay Usuarios cargados.  {/foreach}  

这是我的js文件(我从这个链接获得 )

 $('#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'); }); 

所以,总结一下,我需要调整我的代码来执行以下操作:

  1. 将用户名作为参数发送到模态
  2. 如果按下确认按钮,则删除整行

更新:

模态是有效的,我的意思是它打开和关闭。 modal的确认按钮仅删除行中的“删除按钮”,而不是整行。

最后可以使它工作。 这里是一个简短的版本(没有ajax和聪明和有编码的用户)在线和工作:

http://bootply.com/97366

视图:

  {foreach $frontusers as $frontuser}  {if $frontuser->frontavatar_id eq null}  {else}  {/if} {$frontuser->username} {$frontuser->name} {$frontuser->lastname} {$frontuser->email} {$frontuser->state} {$frontuser->creation_date|date_format:"%Y/%m/%d"} {if $frontuser->status eq 2} Activo {else} No Activo {/if} Edit //here in data-title i store the username so later i can "catch it" in the jquery function Delete     {foreachelse} //no users are in the db   No hay Usuarios cargados.  {/foreach}  

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: " + '' + username + '' + ' ?'); }) //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; });