Show "Loading ..." during page navigation

Question

Show "Loading ..." during page navigation

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

When I make a call ajax I can already show / hide a loading gif like this:

$(document).ajaxStart(function () {
   $('#loadingFull').fadeIn();
}).ajaxStop(function () {
   $('#loadingFull').fadeOut();
});

However, several calls on the system are made like this, including in the menu:

@Html.ActionLink("Importar", "Import", "DeliveryService")

or during a submit button.

How to show the GIF during this request, can you capture this type via javascript ?

javascript jquery c# .net

asked by anonymous 24.10.2017 / 18:32

2 answers

Procedure price range verifying if the date of an EditText is greater than the date of another EditText

score 1 · Answer 1

Your Html.ActionLink() will generate a html similar to this:

<a href="/DeliveryService/Import">Importar</a>

Once you've done this, you just have to intercept the requests and display the GIF.

Below is a simple example of how to do this:

$('a').click(function(){
    $('#loadingFull').fadeIn(); 
});

Note that since the page will be updated, it does not require $('#loadingFull').fadeOut(); .

See a simple example below:

$('a').click(function() {
  $('#loadingFull').fadeIn();
});

div#loadingFull {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="loadingFull"></div>


<a href="#">Importar</a>

For submit() you can do something similar, but instead of .click() , you can use .submit () .

Apparently you're using Asp.NET MVC . With this, you can add the code in your _Layout.cshtml file that will serve all pages.

The loader example I removed from here.

score 0 · Answer 2

In my case, I use blockUI as follows:

$(document).ready(function () {

        //blockUI default
        $.blockUI.defaults.message = '<img src="@Url.Content("~/Content/img/ajax_loader.gif")" />';
        $.blockUI.defaults.css.border = 'none';
        $.blockUI.defaults.css.backgroundColor = '#fff';
        $.blockUI.defaults.css.opacity = 0.6;
        $.blockUI.defaults.overlayCSS.backgroundColor = '#fff';
        $.blockUI.defaults.overlayCSS.opacity = 0.6;

    });