Question

我正在尝试使用bootstrap模式对话框确认从datatable中删除一行每当用户点击删除的链接时，应显示bootstrap模式以确认操作。这是我的源代码：

<c:forEach items="${equipes}" var="equ">
                            <tr>
                                <td><c:out value="${equ.idEquipe}"/></td>
                                <td class="center"><c:out value="${equ.designationEquipe}"/></td>
                                <td class="center">
                                <center>
                                    <a class="btn btn-info" href="modifierEquipe?id=${equ.idEquipe}&nom=${equ.designationEquipe}">
                                        <i class="halflings-icon white edit"></i>  
                                    </a>
                                    <!--  
                                    <a class="btn btn-danger" href="supprimerEquipe?id=${equ.idEquipe}&nom=${equ.designationEquipe}">
                                        <i class="halflings-icon white trash"></i> 
                                    </a>

                                    <button type="button" data-target="#sup"  class="btn btn-danger btn-lg" data-toggle="modal" ><i class="halflings-icon white trash"></i> </button>
                                    -->
                                    <a type="button" href="#sup?id=${equ.idEquipe}&nom=${equ.designationEquipe}"  class="btn btn-danger btn-lg" data-toggle="modal" ><i class="halflings-icon white trash"></i></a>
                                </center>
                                </td>
                            </tr>
                            </c:forEach>

我的目的是将参数传递给下面的bootstrap模式，以便在用户单击模态的OK按钮时使用它们：

<div class="modal hide fade" id="sup">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Suppression</h3>
        </div>
        <div class="modal-body">
            <p>Voulez vous vraiment supprimer cet enregistrement ?</p>

        </div>
        <div class="modal-footer">
            <a href="supprimerEquipe?id=${equ.idEquipe}&nom=${equ.designationEquipe}" class="btn btn-primary" data-dismiss="modal">OK</a>
            <a href="#" class="btn btn-primary" data-dismiss="modal">Annuler</a>
        </div>
    </div>

如果我应该使用javascript和jquery，我正在寻找可以解决我的问题的coorect代码。谢谢。

Answer 1

在你的循环中：

<a type="button" href="#sup" class="btn btn-danger btn-lg modalOpener" data-toggle="modal" data-id="${equ.idEquipe}" data-nom="${equ.designationEquipe}"><i class="halflings-icon white trash"></i></a>

在你的模态中：

<a id="okbtn" href="supprimerEquipe" class="btn btn-primary">OK</a>

在你的js中：

$(".modalOpener").click(function(e) {
    var _href = $("#okbtn").attr("href");
    var params = "?id=" + $(this).data('id') + "&nom=" + $(this).data('nom');
    $("#okbtn").attr("href", _href + params);
});

演示：https://jsfiddle.net/curtisweeks/v10308hb/

使用链接将参数传递给bootsrap模式

1 个答案: