Loading content on tab click

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