Create modal form with search window
Create modal form with search window
Moebius
Posts: 12Questions: 3Answers: 1
Using the following PHP / MySQL code, I can create a modal form with a properly formatted PHP table.
What I'd like to do is have the search window appear, as it does in the main forms. Being able to invoke SearchBuilder would be great, but just the default live search window would be enough. The desire is that the user can filter the table date that appears in the modal form and the pass the result to another process.
So far, all I can do is generate the modal. Any assistance would be appreciated.
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Test</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
</head>
<body oncontextmenu='return false' class='snippet-body'>
<div class="container">
<div class="height d-flex justify-content-center align-items-center"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#catModal"> User details </button> </div>
</div>
<!-- Modal -->
<?php
require_once('../db_config.php');
session_start();
<?php
>
Search Catalog
<?php
?>
$query = 'SELECT * FROM parts ORDER BY cat_no ASC limit 3';
$pdo_statement = $db_connection->prepare($query);
$pdo_statement->execute();
$result = $pdo_statement->fetchAll();
?>
<div class="modal-body">
<div>
<table class="table table-striped table-bordered" id="proteinsTable">
<thead style="white-space: nowrap">
<tr>
<th>Catalog No</th>
<th>Part No</th> <!--Construct!-->
<th>Part Id</th>
<th>URL</th> <!--Host Species!-->
</tr>
</thead>
<tbody>
<?php
if(!empty($result)) {
foreach($result as $row) {
?>
<tr style="white-space: nowrap">
<td><?php echo $row['cat_no']?></td>
<td><?php echo $row['part_no']?></td>
<td><?php echo $row['part_id']?></td>
<td><?php echo $row['url']?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
</div>
<div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div>
</div>
</div>
</div>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchbuilder/1.1.0/css/searchBuilder.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/searchbuilder/1.1.0/js/dataTables.searchBuilder.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js"></script>
</body>
</html>
Replies
This appears to work, so I guess this can be closed:
https://codepen.io/colin0117/pen/gdMQdq?editors=1010