this code is in function.php
<?php
# get company function
function get_company($db)
{
$company_id = $_GET['id'];
$company = $db->prepare("SELECT * FROM companies WHERE company_id = :company_id");
$company->execute(['company_id' => $company_id]);
$company = $company->fetch();
return $company;
}
?>
this code is in index.php (the main file or home page)
<?php
$companies = get_companies($db);
?>
<article id="article">
<?php if ($companies->rowCount() > 0) { ?>
<!-- list of all companies -->
<?php
foreach ($companies as $company) {
?>
<a class="i" href="2.php?id=<?= $company['company_id'] ?>">
<div class="h">
<img src="images/<?= $company['company_image'] ?>">
</div>
<h2><?= $company['company_name'] ?></h2>
</a>
<?php } ?>
<?php } else { ?>
<div class="n">empty</div>
<?php } ?>
</article>
<button id="button1" onclick="m(this.id)">click me to reload articles</button>
<button id="button2" onclick="m(this.id)">click me to reload articles</button>
<button id="button3" onclick="m(this.id)">click me to reload articles</button>
this code is in js file
<script>
function article(id) {
url = new URL(window.location.href);
url.searchParams.set("group_id", id);
window.history.pushState("", "", url);
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("article")...//write some code here to refresh or reload article element when you click button.
}
};
url.search;
xhttp.open("GET", "php/function.php"+url, true);
xhttp.send();
}
</script>
I don’t know how can I reload, refresh or update the div content (part of page, not whole page) when buttom clicked using javascript ajax.
I need a function to get url content and reload the article div (not whole page, part of a page) something like ajax using java script but not jquery or other libraries.