Using Datatables.net with modal-boostrap library

chessGuru64 · September 2018

When I add these lines to the top of my <head> from this example: https://www.w3schools.com/Bootstrap/bootstrap_modal.asp

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

My website does not fully work (neither does the modal-boostrap):
https://databasetable-net.000webhostapp.com/

This is what it should look like before adding the modal-boostrap code:
https://databasetable-net.000webhostapp.com/test.php

I have tried many different lines of code from different articles and figured I would post since there seems to be no clear answer (online anyways).

Thanks.

chessGuru64 · September 2018

The code below worked in a test trial run so the issue is most likely within the header JS.
<button name="add" id="signup" type="submit" class="addform_btn" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-plus-sign"></span> Add Employee</button>

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

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
<div class="modal-body">

<form id="form1" class="form-inline" method="post" action="">
<input type="text" id="first_name" name="first_name" placeholder="First Name" required>
<input type="text" id="last_name" name="last_name" placeholder="Last Name" required>
<input type="text" id="position" name="position" placeholder="Position" required>

<input type="hidden" id="date" name="date" value='<?php echo date("Y-m-d");?>' >
<input type="hidden" id="updated" name="updated" value='<?php echo date("Y-m-d");?>' >
<button class="btn btn-success btn-sm active" type="submit" name="save" id="insert_btn"><span class="glyphicon glyphicon-plus-sign"></span> Save</button>
 <button class="btn btn-success btn-sm active" type="submit" name="close" value="Cancel" data-dismiss="modal">&times;</button>
</form>  

</div>
</div>
  </div>
  </div>

chessGuru64 · September 2018

This header https://github.com/sokchab/phpserverside/blob/master/index.html does not seem to work either.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

            <!-- datatable lib -->
            <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

chessGuru64 · September 2018

Figured out solution:

<!-- bootstrap Lib -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <!-- datatable lib -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

Using Datatables.net with modal-boostrap library

Using Datatables.net with modal-boostrap library

Answers

Howdy, Stranger!

Categories

DataTables

Using Datatables.net with modal-boostrap library

Using Datatables.net with modal-boostrap library

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables