Cargador en un enlace ASP.NET MVC 5

Question

Estoy tratando de hacer algo muy simple, pero no funciona para todos los navegadores ... Necesito tu ayuda aquí:

<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>

Aquí hay un solo botón, cuando haga clic en Activado, le enviará un correo electrónico al usuario con datos de la base de datos.

El hecho es que, si presiono este botón en pocas veces, va a enviar pocos correos.

Entonces, me gustaría poner un cargador o algo así, por lo que el usuario sabe que tiene que esperar unos pocos segundos, y no podrá hacer clic en ese enlace nuevamente.

Intenté algo como esto, pero eso no está funcionando ... soy realmente nuevo con JS ..

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



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

Editar: OK Acabo de actualizar mi código y tengo esto:

     <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>

Eso no funciona, veo el cargador AJAX, incluso si no hago clic en el enlace.

Gracias por ayudar,

Answer 1

Comience con el cargador oculto, que debe resolver su problema:

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