Show "Loading..." while browsing between pages

Asked

Viewed 256 times

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 in the system are made like this, including in the menu:

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

or during a button submit.

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

javascript c# jquery .net

  • See if this no longer solves, make a function to call ajax: @Html.Actionlink("Import", "Import", "Deliveryservice",null, new { onclick="functionDoGif" })

  • @Anthraxisbr this could even answer me, however I would have to put this in all system calls, only the menu are more than 20 calls, It turns out not a good idea, wanted something more generic.

  • 1

    In this case is not feasible, I think you will have to simulate an 'ajax Listener', take a look at this question: https://stackoverflow.com/questions/3596583/javascript-detect-an-ajax-event not with time to make a decent answer now

  • Will be for all links of your site without exception?

  • @Anthraxisbr did a quick test here with one of the answers and it seems that this is the way, thank you.

  • @Randrade yes, I want the user to know that something is being processed.

Show 1 more comment

2 answers

1

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

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

Once done, just intercept the requests and display the GIF.

Below is a simple example of how to do this:

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

Note that as the page will be updated, you do not need $('#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>
<div id="loadingFull"></div>


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

To the submit() you can do something similar, but instead .click(), you can use the .Submit().

Apparently you are using Asp.NET MVC. With this, you can add the code to your file _Layout.cshtml that the same will serve for all pages.

The example of the Loader I removed from here.

  • I am using . net yes, I have created a JS file that is declared on layout.cshtml, had already tried this approach with the a, for some reason something went wrong here that I do not remember, I will do it more carefully here and check. thanks

0

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;

    });

Browser other questions tagged javascript c# jquery .net

You are not signed in. Login or sign up in order to post.