Reputation: 320

bootstrap issue during modal integration

I have an issue when i'm trying to invoque a modal form, the moment when i click the edit button i need to load the form, but nothing appear, after looking for the problem tryin to fix it , the problem still remain, i'm stucked here for today trying all solution but nothing ....

The code snippet is showing the whole code :

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

Upvotes: 0

Answers (1)

Subash

Reputation: 816

It seems you have not included the boot‌strap.min.js file try include it then it would work. Because this file has many methods like, modal, tooltip and etc.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boot‌strap.min.js"></scri‌pt> file.

Include that file after /jquery-3.2.1.min.js. Then it would work.

Upvotes: 1

bootstrap issue during modal integration

Answers (1)

Related Questions