Display the phrase "Kindly hold on, please do not close the windows" during Ajax loading

I have implemented a partial view in my projects. Below is the Ajax code I am using:

$("#btnAdd").on("click", function () {
        var formData = new FormData();
        var dhnFiles = $("#fileDHN")[0].files;

        if (dhnFiles.length == 0) {
          alert("Please select a DHN file first!");
          return;
        }

        for (var i = 0; i < dhnFiles.length; i++) {
            formData.append("DataDHN", dhnFiles[i]);
        }

        $.ajax({
            method: "POST",
            url: "@Url.Action("PartialViewTableDataDHN")",
            data: formData,
            contentType: false,
            processData: false
        }).done(function (data) {
            $("#TableDHN").html(data);
        }).fail(function () {
            alert("Error submitting data to server.");
        });
    });

The loading process takes about 20 minutes. I want the user to be patient and avoid closing the window. How can I display the message 'Please wait, don't close the windows' during the loading?

Thank you.

Answer №1

If you want to enhance user experience, consider incorporating an overlay div that can be displayed using the beforeSend pre-request callback. This way, you can remove the overlay message once the ajax request is completed successfully.

$.ajax({
    method: "POST",
    url: "@Url.Action("PartialViewTableDataDHN")",
    data: formData,
    contentType: false,
    processData: false,
    beforeSend: function( xhr ) {
        $('#overlay_message').show();
    }
}).done(function (data) {
    $("#TableDHN").html(data);
}).fail(function () {
    alert("Error submitting data to server.");
}).completed(function(){
    $('#overlay_message').hide();
});

To learn more about creating overlays, check out this resource: https://www.w3schools.com/howto/howto_css_overlay.asp

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing X-editable in an ASP MVC View: navigating the form POST action to the controller

I have been utilizing the X-Editable Plugin to collect user input and perform server submissions. However, I am encountering an error during submission. What adjustments should I make in order to ensure that the x-editable data functions properly with the ...

Is it possible to override the body width setting?

Is it possible to override the width of the body element? For example, consider the following: <body> <table id="table1"> <tr><td></td></tr> </table> <table id="table2"> <tr><td></td>& ...

Leveraging the power of Angular.js to generate random user profiles

I am attempting to utilize the RUG (Random User Generator) API for a project, but I am struggling to make it function correctly. I have been trying to initiate an HTTP request after a click event, but unfortunately, it does not seem to be working as expect ...

Is there a method for displaying a gif with an alpha channel for transparency effects?

Is it possible to make the black color in a realistic gif animation transparent using CSS? The snow is white and everything else is black, but I want to overlay it on my header image with the snow falling realistically. I've seen animations of falling ...

Modifying Row Color in Bootstrap 3: A Step-by-Step Guide

I'm trying to customize the background color of alternating rows in a Bootstrap 3 grid. I attempted to use CSS and add it to the class within the div, but unfortunately, the color isn't changing as expected. Below is the CSS code I used: .row-b ...

alter the color of the accordion display

Good day everyone, I am seeking help with a Bootstrap query. Here is the HTML code I am working on <!DOCTYPE html> <html lang="nl-NL"> <body> <div class="container-md"> <br> <div c ...

Centering an unordered list and ensuring the image is responsive across different screen sizes are both top priorities for this design

Currently, I am working on an HTML project through freecode academy and encountering some obstacles. My goal is to center align the unordered list and make sure that the image responds well to various screen sizes. Please feel free to leave comments with ...

The controller in ASP.NET MVC is receiving excess model information from the view, which is not needed

In my ASP.NET MVC project, I have a model with around 25 to 30 properties that are utilized in different forms. However, the issue arises when one of my Edit forms, which only contains 15 fields, fails to pass a value to an additional required property in ...

Revitalizing HTML and Google Maps with AJAX, PHP, and JQuery

Context: I am currently working on a project that involves integrating a Simple Google Map with an HTML form right below it. The form collects user input and upon submission, sends the data via AJAX to a PHP script for processing API calls and generating i ...

Is the Bootstrap Navbar Documentation Incorrect?

I found an issue with the Bootstrap navbar code that I copied from the documentation. The navbar seems to be permanently collapsed and I'm not sure how to fix it. I've spent hours trying to troubleshoot this problem but haven't been able to ...

Reducing Image Size for Logo Placement in Menu Bar

Hello all, I am a newcomer to the world of web coding. Please bear with me if I ask something that may seem silly or trivial. I recently created a menu bar at the top of my webpage. Below that, there is a Div element containing an image. My goal is to make ...

How to overcome Django's QueryDict List limitations

Is there a way to send data from a webpage to a django view for serialization into JSON without using QueryDict? I prefer to use simplejson to read the request, flatten it, and save the data to the database. How can I format the data so that simplejson can ...

Guide on transmitting information from two separate pages to a PHP script simultaneously using an AJAX request

Looking to gather user information from a form and pass it onto another page smoothly. Origin Site <form action="destination.php" method="post"> Name: <input type="text" name="name"> Email: <input type="text" name="email"> <input typ ...

In Javascript, navigate to a specific section by scrolling down

Currently, I am in the process of enhancing my portfolio website. My goal is to incorporate a CSS class once the user scrolls to a specific section on the page. (I plan to achieve this using a JavaScript event). One approach I am considering is initially ...

What is the best way to set a single column to have a fixed position when scrolling horizontally?

There is an inline form that extends both horizontally and vertically. Within this form, there is a final column containing an add button which I would like to have a fixed position only when scrolling horizontally, not vertically. <!doctype html> &l ...

Chrome clipping positioned spans

Having trouble positioning a label above inline sections with spans in Chrome, as the labels are getting clipped oddly. Check out these screenshots: Firefox view: Chrome view: In the Chrome screenshot, you can see that the labels are being cut off based ...

Protecting user sessions from unauthorized access, preventing session hijacking, and securing AJAX requests are important

My understanding is that AuthCookie, created by FormsAuthentication, handles encryption and creation of the Auth Token. This token/AuthCookie is then passed on to every client <-> server communication. To prevent the token from being hijacked, it&ap ...

Transmit information from node.js to the frontend utilizing only raw JavaScript

Seeking guidance on sending data object from a Node.js server to a JS file for frontend use. In the main.js file, DOM manipulation is performed. The following request is made: let dataName = []; let request = async ('http://localhost:3000/') =& ...

The functionality of "Priority Nav" is compromised when a div is floated

I am currently utilizing the "Priority Navigation" design technique. This means that when the viewport width is reduced and there isn't enough space for all the list-items to fit horizontally, they are moved into another nested list under a "more" lin ...

sending a JSON string from the Visual Basic.NET side to the ASP.NET server

Struggling with transferring a JSON string to my asp.net using jQuery? Unclear about web methods, arrays, or functions and need assistance parsing the JSON string? Here is an example of how you can achieve this using VB.NET: Protected Sub Page_Load(ByVal ...