Loading content on tab click - php

Question

I recently found a cool tabbed content page, where when you click on the tabs they show content http://codepen.io/unasAquila/pen/nDjgI What I discovered was, that these tabs were preloaded once you enter the page, rather than being loaded as the tabs are clicked on. I was wondering if it is possible to make it to where the content loads as you click on the tab. For example, If I have a PHP Query statement where I want to load information such as this:
$query3 = $db->query("SELECT * FROM mybb_game WHERE id='" . $id . "'");
while($row = mysqli_fetch_array($query3))
{
echo "$row[name]
}
How would I make it to where the content is only loaded once the tab is clicked on?

Answer 1

It can be done using AJAX. Simply put, AJAX is a technology that allows sending requests to the back-end when an event triggers on the front-end.
You could make the following:
In your HTML:
<!-- Change myTabId to whatever id you want to send to the server side -->
<element onclick="loadTab(myTabId)">my tab</element>
In your JS:
// Will be executed on tab click
function loadTab(tabId) {
var xmlhttp = new XMLHttpRequest();
// Define a handler for what to do when a reply arrives from the server
// This function will not be executed on tab click
xmlhttp.onreadystatechange = function() {
// What to do with server response goes inside this if block
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// Change the content of the element with id "myTabContent" to the server reply
document.getElementById("myTabContent").innerHTML = xmlhttp.responseText;
}
}
// Opens a connection to "myServerSideScript.php" on the server
xmlhttp.open("GET", "myServerSideScript.php?id=" + tabId, true);
xmlhttp.send();
}
Now you need to create myServerSideScript.php on the server root with a content similar to the following:
$id = $GET[id]; //The GET parameter we sent with AJAX
$query3 = $db->query("SELECT * FROM mybb_game WHERE id='" . $id . "'");
$response = "";
while ($row = mysqli_fetch_array($query3)){
$response .= $row[name];
}
// To return a reply you just need to print it
// And it will be assigned to xmlhttp.responseText on the client side
echo $response;
You can learn more about AJAX here