Load dialog content using AJAX in React Dialog component

20 Feb 20263 minutes to read

The Dialog component supports dynamic content loading from external sources, such as server files or API endpoints, using AJAX. This allows you to fetch and display content on demand without including it directly in the markup.

Basic AJAX loading

You can use the Dialog’s lifecycle events to trigger AJAX requests and populate the dialog content. The following approach demonstrates how to load content when the dialog opens:

1. Use the beforeOpen or open event to initiate an AJAX request
2. Update the dialog content using the fetched data
3. Handle errors appropriately if the request fails

[Class-component]

app.jsx

import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";
class App extends React.Component {
    buttonClick() {
        DialogUtility.alert('This is an Alert Dialog!');
    }
    render() {
        return (<button className="e-control e-btn" onClick={this.buttonClick} id="targetButton" role="button">Open Alert Dialog</button>);
    }
}
export default App;

app.tsx

import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public buttonClick(): void {
    DialogUtility.alert('This is an Alert Dialog!');
}
public render() {
return (
  <button className="e-control e-btn" onClick={this.buttonClick} id="targetButton" role="button">Open Alert Dialog</button>);
}
}
export default App;

[Functional-component]

app.jsx

import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";
function App() {
    function buttonClick() {
        DialogUtility.alert('This is an Alert Dialog!');
    }
    return (<button className="e-control e-btn" onClick={buttonClick} id="targetButton" role="button">Open Alert Dialog</button>);
}
export default App;

app.tsx

import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";

function App() {
  function buttonClick(): void {
      DialogUtility.alert('This is an Alert Dialog!');
  }
  return (
    <button className="e-control e-btn" onClick={buttonClick} id="targetButton" role="button">Open Alert Dialog</button>);
}

export default App;

Best practices

• Caching: Store fetched content to avoid redundant AJAX requests
• Loading indicators: Display a spinner or message while content is being loaded
• Error handling: Provide user-friendly error messages if the request fails
• Performance: Consider lazy-loading content only when necessary

For more AJAX loading examples, refer to the AJAX Content demo.