How to "Processing..." modal message box

[juliemilligan]

I need to make an http get call using AjaxHelper. I can get the call started via e.g.:

 const deployAjaxHelper = AjaxHelper.get(deployURLFull, { parseJson : true });  

I want to then display a modal message box which says "Processing..." and with a Cancel button. Once the AjaxHelper completes processing, the modal message box needs to be deleted, e.g.:

 AjaxHelper.then(response => { (delete the modal message box) ... }  

If the user presses the Cancel button before the AjaxHelper completes, the AjaxHelper call should be canceled. We would like to do the same for our load() and sync() calls also.

How to do this?
Thanks!

[marcio]

Hey juliemilligan,

Thanks for reaching out.

To achieve this, you can use the MessageDialog class to show a modal message box with a "Processing..." message and a Cancel button. Here's a basic example of how you can implement this:

// Show the modal message box
const dialog = MessageDialog.confirm({
    title   : 'Processing...',
    message : 'Please wait...',
    buttons : {
        cancelButton : 'Cancel'
    }
});

// Start the Ajax call
const deployAjaxHelper = AjaxHelper.get(deployURLFull, { parseJson : true });

// Handle the response
deployAjaxHelper.then(response => {
    // Close the dialog when the request completes
    dialog.close();
    // Process the response here
}).catch(error => {
    // Handle any errors
    dialog.close();
    console.error('Error:', error);
});

// Handle the Cancel button
dialog.then(result => {
    if (result.button === MessageDialog.cancelButton) {
        // Cancel the Ajax call if possible
        // Note: You might need to implement custom logic to cancel the request
        console.log('Request canceled by user');
    }
});

Please note that canceling an ongoing HTTP request is not directly supported by the fetch API, so you might need to implement additional logic to handle cancellation, such as using an AbortController.

You can check some demos in this section of our docs https://bryntum.com/products/schedulerpro/docs/#Core/widget/MessageDialog.

[juliemilligan]

Hi Marcio, thanks for your reply. Question: where in the tech stack is the fetch API used/referenced?

[marcio]

Hi juliemilligan,

The fetch API is a standard JavaScript API used for making network requests. It is not specific to Bryntum products but is commonly used in web applications for handling HTTP requests. In the context of Bryntum, when using AjaxHelper, it internally utilizes the fetch API to perform the network operations. You can refer to the MDN Web Docs on fetch for more details on how it works.