How to use Bold Reports^® Progress and Ajax Events in React Apps

This tutorial explains how to work with AJAX life cycle events in the Bold Reports^® Web Report Viewer. The video demonstrates how developers can intercept server requests, track successful responses, and handle errors during report processing.

If you want more details about AJAX Events, you can check this video:

ajaxBeforeLoad

Fires before an AJAX request is sent to the server. This event allows you to modify headers, inject authorization tokens, or customize request data.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        ajaxBeforeLoad: function (args) {
            // Write a code block to modify headers, tokens,
            // or request data before the AJAX request is sent.
        }
    });
</script>

ajaxSuccess

Fires when an AJAX request is completed successfully. This event can be used to track server responses or perform post‑request operations.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        ajaxSuccess: function (args) {
            // Write a code block to perform any action
            // after a successful AJAX response.
        }
    });
</script>

ajaxError

Fires when an AJAX request fails due to network or server‑side errors. This event helps in logging errors or displaying custom messages.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        ajaxError: function (args) {
            // Write a code block to handle AJAX request errors.
        }
    });
</script>

Implementation Workflow

Request Customization

Use the ajaxBeforeLoad event to inject authentication tokens or customize request headers dynamically.

Response Handling

Use ajaxSuccess and ajaxError events to track request outcomes and manage error handling logic.