forum

Home / DeveloperSection / Forums / Ajax to populate HTML tab content.

Ask Question
Steilla Mitchel

Steilla Mitchel

Follow
I completed my post-graduation in 2013 in the engineering field. Engineering is the application of science and math to solve problems. Engineers figure out how things work and find practical uses for scientific discoveries. Scientists and inventors often get the credit for innovations that advance the human condition, but it is engineers who are instrumental in making those innovations available to the world. I love pet animals such as dogs, cats, etc.

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

21-Jul-2023

Sure, here is how you can use Ajax to populate HTML tab content:

  1. Create a HTML file with a <div> element for each tab. Each <div> element should have a unique ID.
  2. Create a JavaScript file that contains the Ajax code. The Ajax code should make a request to a web server for the content of each tab. The content of the tab should be returned in JSON format.
  3. The JavaScript code should then use the DOM to update the content of each <div> element with the content that was returned from the web server.

Here is an example of how you can use Ajax to populate HTML tab content:

<!DOCTYPE html>
<html>
<head>
<title>My Ajax Tabbed Content Example</title>
</head>
<body>
<div id="tab1">Tab 1</div>
<div id="tab2">Tab 2</div>
<div id="tab3">Tab 3</div>
<script src="ajax.js"></script>
</body>
</html>

// Ajax.js

function getTabContent(tabId) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/tab-content/" + tabId, true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      var content = xhr.responseText;
      var div = document.getElementById(tabId);
      div.innerHTML = content;
    }
  };
  xhr.send();
}

document.getElementById("tab1").onclick = function() {
  getTabContent("tab1");
};

document.getElementById("tab2").onclick = function() {
  getTabContent("tab2");
};

document.getElementById("tab3").onclick = function() {
  getTabContent("tab3");
};

This code creates three <div> elements with the IDs tab1, tab2, and tab3. The JavaScript code then creates an XMLHttpRequest object and makes a request to the /tab-content/ endpoint on the web server. The /tab-content/ endpoint returns the content of the tab in JSON format. The JavaScript code then uses the DOM to update the content of each <div> element with the content that was returned from the web server.

When the user clicks on one of the tabs, the corresponding onclick function is called. The onclick function calls the getTabContent() function, which makes a request to the web server for the content of the tab. The content of the tab is returned in JSON format and is then used to update the content of the <div> element.

MindStick Training

Liked By