I'm trying to display updated SQL records after using SQL update function. How can I use AJAX to achieve this. In JavaScript file I have SQL update function that works via AJAX. When update function is successfully executed then an Async function is called. I believe that data property is not set properly. After launching this function, no updates are visible until page refresh. I'm trying to get live SQL select output.
HTML: (There is included php file: prevoznik.php)
<div class="row pt-5">
<div class="col-12 ff-nu fs-16 fw-600">Izgled za prevoznika
<div class="row pt-3" id="prevoznik">
<div class="col-12 list-widget">
<div class="row divider-heading uppercase py-3">
<div class="col-1 fs-09 fw-600">id</div>
<div class="col-3 flex-vcenter-items fw-600 fs-09">naslov</div>
<div class="col-1 flex-vcenter-items fw-600 fs-09">ura</div>
</div>
<?php require 'includes/prevoznik.php'; ?>
</div>
</div>
</div>
</div>
</div>
PHP (prevoznik.php)
$sql3 = "
SELECT id, potnik_id, ura, naslov
FROM prevoznik
ORDER BY HOUR(ura), MINUTE(ura) ASC;
";
$result = $conn->query($sql3);
$potnik = $row["potnik"];
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
//Spremenjena oblika datuma
$date = date_create($row["ura"]);
$ura_pobiranja = date_format($date,"H:i");
echo "<div class=\"row list divider-gray\">
<div class=\"col-1 fs-09 fw-600\">" . $row["id"] . " </div>
<div class=\"col-3 flex-vcenter-items fw-600 fs-09\">" . $row["naslov"] . " </div>
<div class=\"col-1 flex-vcenter-items fw-600 fs-09\">$ura_pobiranja</div>
";
if ($row["naslov"] !== null) {
echo " <div class=\"col-6 flex-vcenter-items fs-1\">
<form id='form' action='' method='POST'>
<input id='id' name='potnik' value='".$row["id"]."' type='hidden' />
<input id='cas' class=\"form-control fancy-border\" type=\"text\" name=\"posodobljeni_cas\"/>
<input class='btn btn-outline-primary' id='submit' type='submit' value='Nastavi uro'>
<label id=\"info\"></label>
</form>
</div>";
echo " </div>";//update.php?id=" . $row["id"] . "
}
else {
echo " </div>";
}
}
} else {
echo "<div class=\"col flex-vcenter-items fw-100 fs-1\"><i class=\"far fa-frown-open pr-3\"></i>Nimaš še nobenih opravil
</div>";
}
JAVASCRIPT
//Async update
$(function () {
$('#form').on('submit', function (e) {
let idrow = $("#id").val();
let updaterow = "update.php?id=";
console.log(updaterow + idrow);
e.preventDefault();
$.ajax({
type: 'post',
url: updaterow + idrow,
data: $('#form').serialize(),
success: function () {
console.log('ura posodobljena');
//Async select update
$.ajax({
type: 'post',
url: 'prevoznik.php',
data: $('.list'),
success: function () {
console.log('Select izveden');
}
});
}
});
});
});
});
I believe that data: $('.list') should be replaced, but I don't know what should I insert here.