Reloading page custom fetched data - php

Question

Basically I'm trying to load a tab with the following unique_id data from a button. The issue is I want the tab to load with the corresponding variable without reloading the page. I've looked on here for solutions regarding ajax URL rewrite but nothing is working. I dont care about adding more files here and there I just need a solution to this minor problem. Thanks
<a href="?user_id='. $row['unique_id'] .'">
... blah .. stuff.. etc
</a>

Answer 1

Ajax loading into a tab in 2 flavors, vanilla and jquery
function loadTabOG() {
let url = 'someURLThatWillReturnHTML.php';
fetch(url)
.then(response => response.text())
.then(html => {
document.getElementById('tab-2').innerHTML += html
})
// the snippet won't allow us to do an ajax request, so we'll simulate the response here.
document.getElementById('tab-2').innerHTML += "<p>Here is some new html from regular javascript</p>";
}
function loadTabJQ() {
let url = 'someURLThatWillReturnHTML.php';
$.ajax({
url: url,
}).done(function(html) {
$('#tab-2').append(html)
});
// the snippet won't allow us to do an ajax request, so we'll simulate the response here.
$('#tab-2').append("<p>Here is some new html from jquery</p>")
}
.tab {
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
margin: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='tab' id='tab-1'>
<h3>Tab 1</h3>
<ul>
<li><a href='javascript:void(0)' onclick='loadTabOG()'>Load tab 2 using regular javascript</a>
</li>
<li> <a href='javascript:void(0)' onclick='loadTabJQ()'>Load tab 2 using jquery</a>
</li>
</ul>
</div>
<div class='tab' id='tab-2'>
<h3>Tab 2</h3>
<div>