Я заполняю таблицу из вызова базы данных. В первом столбце каждой строки у меня есть переключатель bootstrap 4, который либо установлен как проверенный, либо нет, в зависимости от того, установлено ли поле «is-live» для записей на 1.
Я хотел бы, чтобы пользователь чтобы иметь возможность щелкнуть по переключателю и установить запись как активную или неактивную и для этого обновлять базу данных и таблицу без всяких усилий.
Я знаю, что для этого нужно использовать вызов AJAX, но я не могу обдумать это, поскольку я действительно новичок в JQuery / AJAX .
Я дошел до этого кода, и он возвращает сообщение об успехе, но я застрял, как я должен отправлять входные данные и идентификатор строки в мой php сценарий.
Я могу написать php, чтобы обновить БД после отправки данных, но код выглядит так, как будто он ничего не делает? Я также не уверен, как вернуть успех / неудачу сценарию AJAX в конце моего php. Могу ли я использовать возврат true; или верните false; отправить результат в сценарий AJAX? Я почти уверен, что это не работает.
И, наконец, сценарий находится в каждой строке таблицы, что я считаю довольно плохим с точки зрения производительности ????
$(document).ready(function(){
$("#customSwitch<?php echo $voyage->voyage_id; ?>").on('change.bootstrapSwitch', function(e){
var checkStatus = this.checked ? 1 : 0;
request = $.ajax({
type: 'POST',
url: '<?php echo URLROOT.'/admin/voyages/voyage-admin/updateLive/'; ?>',
data: checkStatus,
});
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.log(errorThrown);
});
});
});
И сценарий PHP, вызываемый через мой контроллер / URL-адрес, в настоящее время является именно этим ...
public function updateLive() {
return $_POST;
}
Это код таблицы (пожалуйста, извините устаревший код сценария ):
<table id="trips" class="table table-bordered text-secondary">
<thead>
<tr class="bg-msp-lightgrey">
<th width="5%">
Active
</th>
<th>
Name
</th>
<th>
Start
</th>
<th>
End
</th>
<th>
Type
</th>
<th class="text-center">
Places
</th>
</tr>
</thead>
<tbody>
<?php foreach ($data['voyageData'] as $voyage) : ?>
<tr>
<td class="text-center">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch<?php echo $voyage->voyage_id; ?>" value="1" <?php echo ($voyage->voyage_live) ? 'checked' : '';?>>
<label class="custom-control-label" for="customSwitch<?php echo $voyage->voyage_id; ?>"></label>
<script>
$(document).ready(function(){
$("#customSwitch<?php echo $voyage->voyage_id; ?>").on('change.bootstrapSwitch', function(e){
if($(this).is(':checked'))
alert('checked');
else
alert('not checked');
});
});
</script>
</div>
</td>
<td>
<?php echo $voyage->voyage_name; ?>
</td>
<td data-sort="<?php echo date('Y-m-d', strtotime($voyage->voyage_startDate)); ?>">
<?php echo date('jS M Y', strtotime($voyage->voyage_startDate)); ?>
</td>
<td data-sort="<?php echo date('Y-m-d', strtotime($voyage->voyage_endDate)); ?>">
<?php echo date('jS M Y', strtotime($voyage->voyage_endDate)); ?>
</td>
<td>
<?php echo $voyage->voyagetype_name; ?>
</td>
<td class="text-center">
<?php echo $voyage->voyage_crewBerth; ?> | <?php echo $voyage->voyage_Afterguard; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>