How to load content using AJAX in React Dialog

4 Sep 20264 minutes to read

The React 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 React Dialog’s lifecycle events to trigger AJAX requests and populate the React Dialog content. The following approach demonstrates how to load content when the React Dialog opens:

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

You can use the browser’s built-in fetch API, axios, or XMLHttpRequest to make the AJAX call. The example below uses fetch to load content from a server endpoint and assigns the result to the Dialog’s content property within the open event handler:

function onOpen(args) {
    fetch('https://your-server-endpoint.com/content')
        .then(response => response.text())
        .then(data => {
            // Assign fetched data to the dialog content
            dialogInstance.content = data;
            dialogInstance.dataBind();
        })
        .catch(error => {
            dialogInstance.content = 'Failed to load content: ' + error.message;
            dialogInstance.dataBind();
        });
}

The code samples below use DialogUtility.alert to demonstrate a predefined React Dialog. To see a full AJAX content-loading example, refer to the AJAX Content demo linked in the See Also section.

[Class-component]

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

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

The following recommendations are not shown in the sample above but are recommended for production use:

  • 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.