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

Load content through Ajax in React Accordion component

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>
Previous
Next