У меня есть таблица, в каждой строке есть ссылка с тегом «нажмите здесь», я хочу использовать модальное окно, чтобы всплывающее окно, когда пользователь нажимает на ссылку, отображает всю информацию о строке и позволяет пользователю редактировать и обновлять.
Я использую AJAX с JQuery для передачи идентификатора строки, который используется в бэкэнде с PHP для выполнения SQL Запрос.
Но я не хочу использовать Bootstrap Модальная Коробка. Пожалуйста, помогите сделать модальное окно всплывающим или что-то другое, чтобы пользователь мог вносить изменения в каждую строку отображаемой таблицы, когда пользователь нажимает <td><p><a href='' id='%d' value='%d'>Click here</a></p></td>.
Мне не совсем понятно, как использовать Модальное окно для каждый ряд. может быть, это может быть проще, используя Jquery.
Ниже приведен код <section> тега моего Dashboard.html, который имеет таблицу.
Здесь сосредоточимся на <td><p><a href='' id='%d' value='%d'>Click here</a></p></td>. который включает кнопку для вызова модального блока.
<!-- View All Added Campaign and Lead information -->
<section class="operation" id="view_all_lead_Campaign" style="width: 100%;margin: 0 auto; display: none;">
<!-- Main Tables Campaign and Lead Table -->
<div class="row">
<!-- MAIN TABLE-->
<div class="col" >
<button class="viewMainTable" name='viewMainTable' onclick='viewMainTable();' id='viewMainTableButton' >Lead Table</button>
<button class="viewCampaignTable" name='viewCampaignTable' onclick='viewCampaignTable();' id='viewCampaignTableButton' >View Campaign Table</button>
<div class="row">
<div class="col span-4-of-4">
<div style="overflow-x:auto;">
<table class="display_table" id='main_lead_table' style="display: none;">
<thead>
<th>#</th>
<th>Lead Id</th>
<th>Name</th>
<th>Website</th>
<th>Linkedin</th>
<th>Lead Description</th>
<th>Owner Notes</th>
<th>Last Contact Date</th>
<th>Next Contact Date</th>
<th>Lead Status</th>
<th>Details</th>
</thead>
<tbody id='leadTable'>
<?php
function getLeadAddedByName($id){
include('./server/connection.php');
$selectSQL = "SELECT UserName FROM `tbl_user_signup_info` WHERE User_Id = '$id' ";
$result = $conn -> query ($selectSQL);
$name = "";
while($row = mysqli_fetch_array($result)){
$name = $row['UserName'];
}
return $name;
}
include('./server/connection.php');
$selectSQL = "SELECT * FROM `tbl_main_lead_info` ORDER BY Lead_Id";
$result = $conn -> query ($selectSQL);
$i = 1;
while ($row = mysqli_fetch_array($result)) {
printf( "<tr class='content'>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td><p><a href='' id='%d' value='%d'>Click here</a></p></td>
</tr>",
$i,
$row['Lead_Id'],
$row['FirstName']." ".$row['LastName'],
$row['Website'],
$row['Linkedin'],
$row['LeadDescription'],
$row['OwnerNotes'],
$row['AdminNotes'],
getLeadAddedByName($row['LeadAddedBy'])."<br>Date/Time: ".$row['LeadAddedOn'],
date('d-m-Y', strtotime($row['LastContactDate'])),
date('d-m-Y', strtotime($row['NextContactDate'])),
$row['LeadStatus'],
$row['Lead_Id'],
$row['Lead_Id'],
);
$i = $i+1;
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
Modal.js файл для получения идентификатора щелчка здесь и соответствующего кодирования, который PHP в бэкэнде выполняет для извлечения записи и заполнения в Модальном ящике Всплывающее окно.
$(document).ready(function() {
$('[name="leadidclick"]').click(function(e){
e.preventDefault();
var leadid = $('[name="leadidclick"]').val();
$.ajax({
type: "POST",
url: './server/modal.php',
data: {
'leadid': leadid
},
success: function(data){
var result = $.parseJSON(data);
console.log(result);
//Modal Box to POP UP HERE
}
});
});
});
Мой Modal.php файл для бэкэнда
<?php
// send a JSON encoded array to client
include('./server/connection.php');
/* check connection */
if ($conn->connect_errno) {
printf("Connect failed: %s\n", $conn->connect_error);
exit();
}
if( $_POST['campaignid'] != "" ) {
// echo "Modal.php file is executed";
$id = $_POST['campaignid'];
$selectSQL = "SELECT * FROM `tbl_main_lead_info` WHERE Lead_Id = '$id' ";
$result_array = array();
$result = $conn -> query ($selectSQL);
// If there are results from database push to result array
if(mysqli_num_rows($result) > 0){
while ($row = mysqli_fetch_array($result)) {
array_push($result_array, $row);
}
}
echo json_encode($result_array);
}else{
echo $conn->error;
}