Modal bootstrap does not appear when clicking button

Asked

Viewed 890 times

4

<!DOCTYPE html>
<html lang="pt-pt">
    <head>
        <link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/css/dataTables.bootstrap.css"/>
        <link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/css/dataTables.bootstrap.min.css"/>
        <script type="text/javascript" src="jquery-3.2.1.js"></script>
        <link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/js/bootstrap.min.js"/>
        <script type="text/javascript" src="./DataTables/datatables.min.js"></script>
        <script type="text/javascript">
            $(document).ready(

                function () {
                    $('button').click(function(event)
                    {
                        event.preventDefault();
                        var modal = $('#myModal').modal('show');
                        modal.on('show.bs.modal', function (event){
                        var t = $('table').DataTable( { ajax: 
                          {
                              url:'<?php echo "ajax.php";?>',
                              data : { 'tabela' : 'dados'},
                              type:'json',
                              method : 'POST',
                              success : function(dado)
                              {
                                  t.rows.add(dado).draw(true);
                              }
                          }
                        }); 
                    });


                   });
                }
            );
        </script>
    </head>
    <body>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <!-- Modal -->
        <div id="myModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
              </div>
              <div class="modal-body">
                <table id="tbmd">

                    <thead>
                        <tr>
                            <th>coluna 1</th>
                            <th>coluna 2</th>
                            <th>coluna 3</th>
                        </tr>
                    </thead>

                </table>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>
        <table id="tb">

                    <thead>
                        <tr>
                            <th>coluna 1.1</th>
                            <th>coluna 2.2</th>
                            <th>coluna 3.3</th>
                        </tr>
                    </thead>

                </table>
    </body>
</html>

modal does not appear. The imports are in the correct directories.

twitter-bootstrap modal

  • What error does it present ?

  • The import of bootstrap.min.js is incorrect.

  • @Everson really, had not noticed, he is calling . js as if it were a css

  • Put all your JS before the closing of the body

  • Check your ajax.php, because removing the ajax call is working correctly. https://codepen.io/anon/pen/OYwaZr?editors=1010

2 answers

1

Try to change from:

<link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/js/bootstrap.min.js"/>

To:

<script type="text/javascript" src="./DataTables/DataTables-1.10.16/js/bootstrap.min.js"></script>

0

Your bootstrap.js import line is incorrect friend, try to put so:

<script src="./DataTables/DataTables-1.10.16/js/bootstrap.min.js"/>

another error that is happening is that this import is coming before all your code the advisable is to import all javascript files before closing the tag </body> so you avoid that it does not Compile on the page and is a good practice.

Browser other questions tagged twitter-bootstrap modal

You are not signed in. Login or sign up in order to post.