Passing arguments to bootsrap modal using a link

Question

I'm trying to confirm deleting a row from datatable using bootstrap modal dialog whenever a user clicked deleted link, bootstrap modal should be displayed to confirm the action. here is my source code:

<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>

my purpose is to pass arguments to the bootstrap modal below to to use them if the user clicks the OK button of the modal:

<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>

Please if I should use the javascript and jquery, I'm looking for the coorect code that can solves my problem. Thank you.

Possible duplicate of [Passing data to a bootstrap modal](http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal) — Curtis Weeks, Jun 13 '16 at 14:06

Curtis Weeks · Answer 1 · 2016-06-10T19:54:28.873

In your loop:

<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>

In your modal:

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

In your 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);
});

Demo: https://jsfiddle.net/curtisweeks/v10308hb/

Passing arguments to bootsrap modal using a link

1 Answers1