I always make sure to check for the loading indicator before accessing my partial view

this is the HTML code that I have written.

<input type="button" name="signup_submit" data-toggle="collapse" data-target="#panel" onclick="generate('#report', '_DailyReport', 'Reports');" class="btn btn-primary toggle" id="btnSubmit" value="Generate"  />

partial view div

<div class="panel panel-default" id="report" style="display:none">

this is the AJAX request function to display the partial view

var generate = function (editHtmlInnerId, EditActionName, EditcontrollerName) {
    debugger;
$.ajax({
    url: "/" + EditcontrollerName + "/" + EditActionName,
    type: $("#addNewUserForm").attr('method'),
    data: $("#addNewUserForm").serialize(),
    success: function (result) {

        $(editHtmlInnerId).html(result);
        $(editHtmlInnerId).show();

       },
    error: function () {
    }
});
};

I want to show a loading indicator until the data loads in the partial view. The partial view contains a table that generates data.

javascript.netajax

Answer №1

One effective way to enhance user experience is by displaying a loading indicator before initiating an ajax call, and then managing its visibility within the "success" and "error" events:

var displayLoading = function (editHtmlInnerId, EditActionName, EditcontrollerName) {
    debugger;

// Show loading overlay.
$("#divLoading").show();

$.ajax({
    url: "/" + EditcontrollerName + "/" + EditActionName,
    type: $("#addNewUserForm").attr('method'),
    data: $("#addNewUserForm").serialize(),
    success: function (result) {

        // Hide loading indicator on success.
        $("#divLoading").hide();

        $(editHtmlInnerId).html(result);
        $(editHtmlInnerId).show();

       },
    error: function () {

        // Hide loading indicator on error.
        $("#divLoading").hide();

    }
});

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

Pagination in Yii2 is not functioning properly following an AJAX request and the use of renderPartial

As I search for products on the website, I notice that when the page is initially loaded, all the products are displayed. The product block is enclosed in pjax and pagination is handled by the LinkPager widget. When a search query is made to the server vi ...

phpajaxpaginationyii2pjax

How can we ensure that the user's language preference is saved?

I'm currently working on implementing a language switcher feature for a website I've been developing. I'm facing an issue where the site doesn't remember the user's language preference and keeps reverting back to English. Any ass ...

javascriptjquery

Encountering an authentication failure error while making a call to a web method through the

Every time I attempt a JQuery call, I receive an Authentication failed message: { Message: "Authentication failed.", StackTrace: null, ExceptionType: "System.InvalidOperationException" } JQuery call being made: $(document).ready(function ( ...

c#jqueryasp.netajaxwebmethod

Ways to maintain group settings for a Telerik MVC Grid connected to Ajax

Currently, I am seeking guidance on how to persist grouping settings on an Ajax bound Telerik ASP .NET MVC grid. My goal is to have the grid display revert back to its previous settings when a user navigates away to a detail screen and then returns to the ...

javascriptasp.net-mvcajaxtelerik

Obtaining a file from Firestore using cloud functions

I have experimented with various approaches, like: const admin = require("firebase-admin"); admin.initializeApp(); const db = admin.firestore(); const docRef = db.collection("users").doc(dynamicDocID).get() const docRef = db.collectio ...

javascriptnode.jsfirebasegoogle-cloud-firestoregoogle-cloud-functions

Refreshing a Variable's Value in NODE.JS

After much struggle, I've come to the realization that I may have to seek help from the experts on 'StackOverflow' for this issue. Here is my code that continues to baffle me: var express = require('express'), fs = require(&ap ...

javascriptjsonnode.jsexpress

When visiting this website, a special feature is enabled where the page will automatically refresh every 5 seconds. As the countdown begins, the numbers 5, 4,

Could use some assistance with setting up an HTML page to reload every 5 seconds and display a countdown when the refresh link is clicked. After clicking the refresh link, it should disappear and show a countdown from 5 to 1 before reloading the page aga ...

javascripthtmlsettimeoutreload

When using select2 with AJAX, ensure that the previous response is cleared when the field

Learn how to implement select2 $("#select").select2({ ajax: { url: "/getcity", dataType: 'json', type: 'post', delay: 250, allowClear: false, minimumInputLength: 3, cache: true } }); Every time I focus, ...

jqueryajaxjquery-select2

Guide on how to iterate through the list of users within the component

Hello, I'm fairly new to working with react and I've encountered a challenge regarding implementing a loop within this component to display a list of all users. Despite trying numerous approaches, I haven't been able to figure it out. colum ...

javascriptreactjsreact-nativevue.jsreact-hooks

What is the best way to cluster related data points and display them together?

In order to efficiently manage the data I receive, it is necessary to group it based on specific criteria and display these groups in the user interface. "ServiceRequest": [ {"Status": "Re-Open", },{ "Status": "Open", ...

javascriptangularjs

The Fixed Navbar is causing sections to be slightly off from their intended positions

Utilizing a bootstrap navigation menu on my website with a fixed position. When clicking a menu item, it takes me to the designated section but slightly above the desired position. How can I ensure that it goes to the exact position upon clicking the men ...

javascripthtmlangularbootstrap-4bootstrap-5

Hover over the text only, not the entire row

Is there a way to create a mouse hover effect on text only, without affecting the entire row? I attempted using Position(), but didn't have success. Here is a link to the fiddle I created: <ul id='ulid'> <li>Task1</li> < ...

javascriptjqueryhtmlcss

Ajax is displaying some unusual behavior

Currently, I am working on an ajax request to check if a specific combination of username or password exists. <script> $("form").submit(function(e){ e.preventDefault(); //send data to ajax file now $.ajax({ type: 'POST ...

javascriptphpjqueryajax

How can I modify a variable on a button click without using a function?

I am looking to make the app variable in the config parameter dynamic by implementing radio buttons with values. I am curious about how to pass the value based on user preference. If the selection is changed from selection1 to selection2, it should auto-r ...

javascriptjqueryhtmlcss

Is it possible to utilize constructor initialization for dependency injection in place of utilizing DI containers?

Take a look at this example to better understand the concept public interface IService<T> where T : class { List<T> GetAll(); T GetById(object id); .......... other methods go here } public class Service<T> : IService< ...

c#.netdesign-patternsdependency-injection

There seems to be an issue with the AJAX REST call failing to transmit data

Whenever I attempt to submit the form, the page refreshes and nothing gets saved in the database. The code in subforum.js $(document).on('click','#submit',function(e) { var user = JSON.parse(sessionStorage.getItem("ulogovan")); consol ...

javascriptjavajqueryajaxrest

Alternative to dynamic arrays in Javascript

I successfully implemented a masonry grid using Flexbox. Initially, the items were ordered vertically, so I developed a function to rearrange them horizontally: Original Order: 1 4 7 2 5 8 3 6 9 New Order (with my sorting function): 1 2 3 4 5 6 7 8 9 ...

javascriptreactjsperformance

Choosing choices from an array of values in a selection box

Using Ajax request with Jquery, I am receiving some values in JSON format. When I try alert(msg.options), it displays ["1","3","8"] The following script successfully selects the required options with values 1, 3, and 8: $('#input_6').val(["1"," ...

javascriptjqueryjson

Why is the Slick Slider displaying previous and next buttons instead of icons?

I'm currently working on creating a slider using the slick slider. Everything seems to be functioning properly, but instead of displaying arrows on the sides, it's showing Previous and Next buttons stacked vertically on the left side. It appears ...

javascripthtmljquerycssslick.js

Creating a Click Counter with jQuery 2.0.1/2.0.2: A Step-by-Step Guide

Currently in the process of creating a fundraising webpage for charity, I have chosen to display an animated rabbit making its way Around The World. My progress so far includes a non-looping gif that plays on click, with a limitation on how often it can b ...

javascripthtmlcssonclickclick-counting