У меня есть программа PHP с данными ( Сторона сервера !! ):
Каждая строка имеет кнопка («Управление»), при нажатии которой открывается модальное окно Bootstrap 4:
Мне нужно заполнить 2 элемента модального окна с данными в строке, содержащей кнопку, которая была нажата.
Любая подсказка будет принята с благодарностью.
HTML:
<body>
<div id="manageModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="manageAccountModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content border border-dark">
<form id="manageModalForm" name="manageModalForm" action="" method="POST" role="form" class="p-2 needs-validation" novalidate>
<div class="modal-body">
<div>
Id<a id="accUserId" name="accUserId" class="form-control"></a>
<br>
</div>
<div class="form-group">
User Name<input id="accUserName" name="accUserName" type="text" class="form-control">
</div>
</div>
<div id="manageModalActions" class="modal-footer myLightPurpleBgColor rounded">
<div class="col-8">
<div class="row">
<div class="col-4">
<button type="button" class="btn btn-secondary text-light border border-dark myBigBtn font-weight-bold" data-dismiss="modal"><h7>Cancel</h7></button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid mr-n2 ml-n2 mb-n2 rounded bg-secondary">
<div class="container">
<div class="row">
<div class="col-lg-12 col-lg-offset-2 myMargTop20 bg-white rounded">
<table id="example" class="display table table-bordered table-hover dt-responsive nowrap rounded" cellspacing="0" width="100%">
<br>
<thead>
<tr>
<th>Manage</th>
<th>Id</th>
<th>User Name</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
Javascript:
<script>
$(document).ready(function() {
$('#example').dataTable({
'scrollX': true,
'pagingType': 'numbers',
'processing': true,
'serverSide': true,
'ajax': 'datatablesServerSide.php',
"columnDefs": [{"render": createManageButtonFunc, "data": null, "targets": [0]}],
});
});
function createManageButtonFunc() {
return '<button id="manageBtn" type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#manageModal">Manage</button>';
}
</script>
datatablesServerSide. php:
<?php
$table = "users";
$primaryKey = "usrId";
$columns = array(
array("db" => "usrId", "dt" => 1),
array("db" => "usrName", "dt" => 2)
);
$sql_details = array(
"user" => "root",
"pass" => "",
"db" => "a_my_project",
"host" => "localhost"
);
require( "ssp_with_UTF8.class.php" );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);