Chargeur sur un lien ASP.NET MVC 5

Question

Je suis en train de faire quelque chose de très simple, mais il ne fonctionne pas pour tous les navigateurs...J'ai besoin de votre aide ici :

<a href="@(Url.Action("Accept", "Manager", new { HolidayId = item.HolidayId }))" class="uifw-button xsmall black" OnClick="loader()"><i class="uifw-icon-standard uifw-icon-standard-check-circle xsmall " ></i>Accept</a>

Voici un simple bouton, Quand je clique sur, il va envoyer un e-Mail de l'utilisateur avec les données de la base de données.

Le fait est, si je vous appuyez sur ce bouton plusieurs fois, ça va envoyer quelques mails.

Donc, j'aimerais mettre un chargeur ou quelque chose comme cela, donc à l'utilisateur de savoir qu'il faut attendre quelques secondes, et il ne sera pas capable de cliquer sur ce lien.

J'ai essayé quelque chose comme ça, mais qui ne fonctionne pas..Je suis vraiment nouveau avec JS..

     <script type="text/javascript">
                (function loader() {
                        getElementById('loading').style.display ='block';
                }(document));
            </script>



           <div id="loading">
                <img src="~/images/ajax-loader.gif" />
            </div>

Edit :Ok je viens de mettre à jour mon code et j'ai ceci :

     <script type="text/javascript">
                function ShowSendingProgress() {
                    var modal = $('<div  />');
                    modal.addClass("modal");
                    modal.attr("id", "modalSending");
                    $('body').append(modal);
                    var loading = $("#modalSending.loading");
                    loading.show();
                    var top = '215px';
                    var left = '560px';
                    loading.css({ top: top, left: left, color: '#ffffff' });

                }
            </script>



            <div class="loading" id="modalSending" align="center">
                <img src="~/images/ajax-loader.gif" />
            </div>


  <a href="@(Url.Action("Accept", "Manager", new { HolidayId = item.HolidayId }))" class="uifw-button xsmall black" OnClick="ShowSendingProgress()"><i class="uifw-icon-standard uifw-icon-standard-check-circle xsmall "></i>Accept</a>

Qui ne fonctionne pas, je vois l'ajax loader même si je ne clique pas sur le lien..

Merci pour votre aide,

Answer 1

Démarrer avec le chargeur caché, ce qui devrait résoudre votre problème:

<div class="loading" id="modalSending" align="center" style="display:none">