Fatal编程技术网
  • javascript/
  • Javascript 模态积分过程中的自举问题

Javascript 模态积分过程中的自举问题

javascript jquery

Javascript 模态积分过程中的自举问题,javascript,jquery,bootstrap-modal,Javascript,Jquery,Bootstrap Modal,当我尝试为一个模式表单开具发票时，我遇到了一个问题，当我点击编辑按钮时，我需要加载表单，但没有出现任何问题，在寻找问题并尝试解决它之后，问题仍然存在，我今天在这里尝试了所有解决方案，但什么都没有 代码片段显示了整个代码： <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title th:text="#{title}">Spring 4 MVC</title&

当我尝试为一个模式表单开具发票时，我遇到了一个问题，当我点击编辑按钮时，我需要加载表单，但没有出现任何问题，在寻找问题并尝试解决它之后，问题仍然存在，我今天在这里尝试了所有解决方案，但什么都没有

代码片段显示了整个代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{title}">Spring 4 MVC</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" 
    href="../static/css/bootstrap.min.css"
    th:href="@{css/bootstrap.min.css}"
    />
    <link rel="stylesheet" type="text/css" 
    href="../static/css/dataTables.bootstrap4.min.css"
    th:href="@{css/dataTables.bootstrap4.min.css}"
    />
    <link rel="stylesheet" type="text/css" 
    href="../static/css/buttons.bootstrap4.min.css"
    th:href="@{css/buttons.bootstrap4.min.css}"
    />
<script type="text/javascript" 
src="../static/js/jquery-3.2.1.min.js"
th:src="@{js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript" 
src="../static/js/jquery.dataTables.min.js"
th:src="@{js/jquery.dataTables.min.js}"></script>

<script type="text/javascript" 
src="../static/js/dataTables.buttons.min.js"
th:src="@{js/dataTables.buttons.min.js}"></script>

<script type="text/javascript" 
src="../static/js/pdfmake.min.js"
th:src="@{js/pdfmake.min.js}"></script>

<script type="text/javascript" 
src="../static/js/dataTables.bootstrap4.min.js"
th:src="@{js/dataTables.bootstrap4.min.js}"></script>

<script type="text/javascript" 
src="../static/js/buttons.bootstrap4.min.js"
th:src="@{js/buttons.bootstrap4.min.js}"></script>



<script type="text/javascript">
$(document).ready(function() {
    $('#example').DataTable( {


    } );

    table.buttons().container()
    .appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );
</script>
<script type="text/javascript">
$(document).ready(function(){
    $("#mytable #checkall").click(function () {
            if ($("#mytable #checkall").is(':checked')) {
                $("#mytable input[type=checkbox]").each(function () {
                    $(this).prop("checked", true);
                });

            } else {
                $("#mytable input[type=checkbox]").each(function () {
                    $(this).prop("checked", false);
                });
            }
        });

        $("[data-toggle=tooltip]").tooltip();
    });




</script>

</head>
<body>
<div class="container">

    <div th:if="${not #lists.isEmpty(produit)}">
        <h2>Product List</h2>
        <table id="example"  class="table table-striped table-bordered">
            <thead>
            <tr>
                <th>Id</th>
                <th>Product Id</th>
                <th>Description</th>
                <th>Price</th>
                <th>View</th>
                <th>Edit</th>
                 <th>Delete</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="product : ${produit}">
                <td th:text="${product.idProduit}">Id</td>
                <td th:text="${product.code}">code</td>
                <td th:text="${product.libelle}">descirption</td>
                <td th:text="${product.indice}">price</td>

                <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button data-title="Edit" data-toggle="modal" data-target="#edit">Edit</button></p>
            </tr>
            </tbody>
        </table>
    </div>
   </div>
   <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
      <div class="modal-dialog">
    <div class="modal-content">
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
      </div>
          <div class="modal-body">
          <div class="form-group">
        <input class="form-control " type="text" placeholder="Mohsin"/>
        </div>
        <div class="form-group">

        <input class="form-control " type="text" placeholder="Irshad"/>
        </div>
        <div class="form-group">
        <textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>


        </div>
      </div>
          <div class="modal-footer ">
        <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
      </div>
        </div>
    <!-- /.modal-content --> 
  </div>
      <!-- /.modal-dialog --> 
    </div>



    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
      <div class="modal-dialog">
    <div class="modal-content">
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
      </div>
          <div class="modal-body">

       <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

      </div>
        <div class="modal-footer ">
        <button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
      </div>
        </div>
    <!-- /.modal-content --> 
  </div>
      <!-- /.modal-dialog --> 
    </div>

</body>

</html>


Spring4MVC
$（文档）.ready（函数（）{
$（'#示例'）。数据表（{
} );
table.buttons（）.container（）
.appendTo（“#示例_wrapper.col-md-6:eq（0）”）；
} );
$（文档）.ready（函数（）{
$（“#mytable#checkall”）。单击（函数（）{
如果（$（“#mytable#checkall”）.是（':checked'））{
$（“#mytable输入[类型=复选框]”）。每个（函数（）{
$（this）.prop（“选中”，true）；
});
}否则{
$（“#mytable输入[类型=复选框]”）。每个（函数（）{
$（this）.prop（“选中”，false）；
});
}
});
$（“[数据切换=工具提示]”）。工具提示（）；
});
产品清单
身份证件
产品Id
描述
价格
看法
编辑
删去
身份证件
密码
描述
价格

编辑

编辑您的详细信息
更新
删除此条目
是否确实要删除此记录？
对
没有
您似乎没有包括
启动‌​strip.min.js
文件尝试包含它，然后它就会工作。因为这个文件有很多方法，比如，
模态、工具提示等等


文件


在
/jquery-3.2.1.min.js
之后包含该文件。然后它就可以工作了。
您似乎没有包括，
文件。在
/jquery-3.2.1.min.js
之后包含该文件，然后它就可以工作了。谢谢@SubashYou，不客气！！！