将数据传递到 bootstrap 模态

Question

我正在使用 JSP、Jquery 和 Bootstrap 正如您在我的代码中看到的那样：

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">


</head>

<body>
    <div class="container-fluid">

        <div class="row" id="logo">
            <header>
                <div class="btn-group">

                    <button type="button" class="btn btn-md dropdown-toggle"
                        aria-label="Left Align" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" id="menutopo">
                        <span
                            class="glyphicon glyphicon-menu-hamburger glyphicon-align-left"
                            id="menu"></span>
                    </button>

                    <%@ include file="dropdown_menu.jsp"%>

                </div>
                HEALTH TRACK
                <p>Histórico de Pesagem</p>
                <img src="resources/images/Health heart.png" class="img-fluid"
                    alt="backlogo" id="backhearth">
            </header>
        </div>

        <section>

            <div id="dados" class="container-fluid">

                <div>
                    <c:if test="${not empty msg }">
                        <div class="alert alert-success">${msg}</div>
                    </c:if>
                    <c:if test="${not empty erro }">
                        <div class="alert alert-danger">${erro}</div>
                    </c:if>
                </div>

                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">Data</th>
                            <th scope="col">Peso (Kg)</th>
                            <th scope="col">Ação</th>
                        </tr>
                    </thead>
                    <tbody>

                        <c:forEach items="${pesos}" var="p">
                            <tr>
                                <td><fmt:formatDate value="${p.dtDataHoraPeso}"
                                        pattern="dd/MM/yyyy" /></td>
                                <td>${p.vlPeso}</td>
                                <td><c:url value="peso" var="link">
                                        <c:param name="acao" value="abrir-form-edicao" />
                                        <c:param name="cdPeso" value="${p.cdPeso}" />
                                    </c:url> <a href="${link}" type="button" class="btn btn-default"
                                    aria-label="Left Align"> <span
                                        class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>

                                    <button type="button" class="btn btn-danger"
                                        aria-label="Left Align" data-toggle="modal"
                                        data-target="#excluirModal"
                                        onclick="cdPesoExcluir.value = ${p.cdPeso}">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    </button></td>
                                <td>${p.cdPeso }</td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </section>

        <footer>
            <div class="navbar">
                <a href="PesoInsert.jsp" type="button" class="btn btn-secundary"
                    id="botao"> <span class="glyphicon glyphicon-plus"
                    aria-hidden="true" id="glymais"></span>Peso
                </a>

                <div class="btn-group dropup">
                    <button type="button" class="btn btn-secondary dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        id="infos">Outras Informações</button>
                    <ul class="dropdown-menu">
                        <li><a href="PressaoArterial.jsp">Pressão Arterial</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="Alimentos.jsp">Alimentos</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="AtividadeFisica.jsp">Atividade Física</a></li>
                    </ul>
                </div>
            </div>
        </footer>
    </div>



    <!-- Modal -->
    <div class="modal fade" id="excluirModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmação</h5>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">Deseja realmente excluir o registro?</div>
                <div class="modal-footer">
                    <form action="peso" method="post">
                        <input type="hidden" name="acao" value="excluir"> <input
                            type="hidden" name="cdPeso" id="cdPesoExcluir">
                        <button type="button" class="btn btn-secondary"
                            data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-danger">Excluir</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <%@ include file="footer.jsp"%>


</body>
</html>

我需要传递这个参数“&{cd.Peso}”

<button type="button" class="btn btn-danger"
                                    aria-label="Left Align" data-toggle="modal"
                                    data-target="#excluirModal"
                                    onclick="cdPesoExcluir.value = **${p.cdPeso}**">
                                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                </button></td>

进入此模式，就在“值”字段中。这将使我的代码正常工作并删除查询的当前行。

<form action="peso" method="post">
                    <input type="hidden" name="acao" value="excluir"> <input
                        type="hidden" name="cdPeso" id="cdPesoExcluir" **value=""**>
                    <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger">Excluir</button>
                </form>

有没有人有实现这一目标的想法？我已经通过手动将代码写入字段值来测试代码并且它可以正常工作。

Answer 1

您可以为您的按钮提供自定义属性，该属性将具有您需要传递给后端的值，即：data-value="${p.cdPeso}"。然后，您可以使用 show.bs.modal 事件，只要您的模态显示，该事件就会被调用然后使用 $(event.target).attr('data-value') 将按钮的值传递给您的 input-box.

演示代码 :

//will get call when modal will be open
$(document).on('show.bs.modal', '#excluirModal', function(e) {
  //put the value of attr inside input box
  $("input[name=cdPeso]").val($(event.target).attr('data-value'))
  console.log($(event.target).attr('data-value'))
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">Data</th>
      <th scope="col">Peso (Kg)</th>
      <th scope="col">Ação</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>
        <fmt:formatDate value="${p.dtDataHoraPeso}" pattern="dd/MM/yyyy" />
      </td>
      <td>something</td>
      <td>
        <c:url value="peso" var="link">
          <c:param name="acao" value="abrir-form-edicao" />
          <c:param name="cdPeso" value="${p.cdPeso}" />
        </c:url>
        <a href="${link}" type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
        <!--put `data-value="${p.cdPeso}"` -->
        <button type="button" class="btn btn-danger" aria-label="Left Align" data-toggle="modal" data-target="#excluirModal" data-value="1">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    </button></td>
      <td>1</td>
    </tr>

    <tr>
      <td>
        <fmt:formatDate value="${p.dtDataHoraPeso}" pattern="dd/MM/yyyy" />
      </td>
      <td>something1</td>
      <td>
        <c:url value="peso" var="link">
          <c:param name="acao" value="abrir-form-edicao" />
          <c:param name="cdPeso" value="${p.cdPeso}" />
        </c:url>
        <a href="${link}" type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>

        <button type="button" class="btn btn-danger" aria-label="Left Align" data-toggle="modal" data-target="#excluirModal" data-value="2">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    </button></td>
      <td>2</td>
    </tr>
  </tbody>
</table>
<div class="modal fade" id="excluirModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Confirmação</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
      </div>
      <div class="modal-body">Deseja realmente excluir o registro?</div>
      <div class="modal-footer">
        <form action="peso" method="post">
          <input type="hidden" name="acao" value="excluir"> <input type="text" name="cdPeso" id="cdPesoExcluir">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-danger">Excluir</button>
        </form>
      </div>
    </div>
  </div>
</div>

将数据传递到 bootstrap 模态

Passing data into a bootstrap modal

jquery

jsp

modal-dialog

onclick

twitter-bootstrap