React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Load content through Ajax in React Accordion component

25 Jan 2023 / 1 minute to read

Accordion supports to load external contents through AJAX library. Refer the below steps.

  • Import the Ajax module from ej2-base and initialize with URL path.
  • Get data from the Ajax Success event to initialize Accordion with retrieved external path data.
Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Ajax } from '@syncfusion/ej2-base';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
function ReactApp(props) {
    return (<AccordionComponent>
  <AccordionItemsDirective>
    <AccordionItemDirective header='Department' content='#content1'/>
    <AccordionItemDirective header='Platform' content='#content2'/>
    <AccordionItemDirective header='Employee Details' content={props.data}/>
  </AccordionItemsDirective>
</AccordionComponent>);
}
let ajax = new Ajax('./ajax.html', 'GET', true);
ajax.send().then();
ajax.onSuccess = (dataSt) => {
    ReactDOM.render(<ReactApp data={dataSt}/>, document.getElementById("element"));
};
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Accordion Ajax Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        div#headername {
           margin-left: 100px;
        }
    </style>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
        <div id="content1" style="display:none">
            <ul style="margin : 0px;padding:0px 16px; list-style-type: none">
                <li>Testing</li>
                <li>Development</li>
            </ul>
        </div>
        <div id="content2" style="display:none">
            <ul style="margin : 0px;padding:0px 16px; list-style-type: none">
                <li>Mobile</li>
                <li>Web</li>
            </ul>
        </div>
</body>
</html>
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Ajax } from '@syncfusion/ej2-base';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';

function ReactApp(props) {
  return (
<AccordionComponent>
  <AccordionItemsDirective>
    <AccordionItemDirective header='Department' content='#content1' />
    <AccordionItemDirective header='Platform' content='#content2' />
    <AccordionItemDirective header='Employee Details' content={props.data} />
  </AccordionItemsDirective>
</AccordionComponent>
  );
}
let ajax: Ajax = new Ajax('./ajax.html', 'GET', true);
ajax.send().then();
ajax.onSuccess = (dataSt: string): void => {
  ReactDOM.render(<ReactApp data={dataSt} />, document.getElementById("element") as HTMLElement);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);
Previous
Next