I have a hidden div on my page, I want to know what kind of way I can do to keep showing the div when the page is reloaded, with the following example:
This my html :
<div class="card-body">
<div class="overlay" id="kt_datatable_nodata">
<div class="overlay-wrapper rounded bg-light text-center">
<p class="font-weight-bold text-center">Pilih data untuk dibandingkan</p>
<a href='#right-modal' class='btn' data-toggle='modal'>Change Data</a>
</div>
</div>
<!--begin::Table-->
<div id="kt_datatable_fetch_display"></div>
<!--End::Table-->
</div>
This My javascript :
$('#kt_datatable').on('click','tr button', function() {
var id = $(this).data('id');
$.ajax({
type: 'post',
url: 'src/khu-pusat/compare/right-side/right-value.php',
data: {
'rowid': id
},
success: function(data) {
$('#kt_datatable_nodata').addClass('hidden');
$('#kt_datatable_fetch_display').html(data);
}
});
})
this right-value.php :
<?php
session_start();
include 'db_connect.php';
if (isset($_POST['rowid'])) {
$id = $_POST['rowid'];
$query = mysqli_query($config, "SELECT* FROM data_penilaian where id = '$id'");
$no = 1;
while ($row = mysqli_fetch_array($query)) {
?>
<form class="leftForms" method="POST">
<input type="hidden" name="id" value="<?= $row['id']; ?>">
<input type="text" name="position" value="<?= $row['position']; ?>">
</form>
<?php
}
} ?>
here what I want to do is what kind of way I can do to keep the kt_datatable_fetch_display on or after the page is reloaded. Thanks for any help.
I dont know if I understand quite what you want to do, but the only way I'm thinking you could achieve this it's to make your button to add a query param that must be your id.
Exaple:
// This goint to redirect to the new URL
$('#kt_datatable').on('click','tr button', function() {
var id = $(this).data('id');
var yourSiteURL = "http://localhost";
window.location.href = `yourSiteURL/${id}`;
});
/*
When DOM loads read query params and make your ajax req
So, no matter page reloads, always goint to make the ajax req and fill your div
*/
$(document).ready(function(){
var searchParams = new URLSearchParams(window.location.href);
var id = searchParams.get("id");
$.ajax({
type: 'post',
url: 'src/khu-pusat/compare/right-side/right-value.php',
data: {
'rowid': id
},
success: function(data) {
$('#kt_datatable_nodata').addClass('hidden');
$('#kt_datatable_fetch_display').html(data);
}
});
})