Load content through Ajax in React Accordion component

20 Apr 2021 / 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.tsx

index.html

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';
class ReactApp extends React.Component {
    render() {
        return (<AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Department' content='#content1'/>
          <AccordionItemDirective header='Platform' content='#content2'/>
          <AccordionItemDirective header='Employee Details' content={this.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"));
};

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';

class ReactApp extends React.Component<{}, {}> {
  render() {
   return (
    <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Department' content='#content1' />
          <AccordionItemDirective header='Platform' content='#content2' />
          <AccordionItemDirective header='Employee Details' content= { this.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); }

<!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/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%;
        }
    </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>