` 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 `
` 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:
```plaintext
My Ajax Tabbed Content Example
Tab 1
Tab 2
Tab 3
```
```plaintext
// 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 `
` 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 `
` 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 `
` element.
---
Original Source: https://www.mindstick.com/forum/159188/ajax-to-populate-html-tab-content
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.