Ajax to populate HTML tab content.

Question

Aryan Kumar · Answer

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

Create a HTML file with a <div> element for each tab. Each <div> element should have a unique ID.
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.
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.

forum

Ajax to populate HTML tab content.

Can you answer this question?

1 Answers