リンク上のローダー ASP.NET MVC 5

Question

非常に単純なことをしようとしていますが、すべてのブラウザで機能するわけではありません...ここであなたの助けが必要です:

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

ここにシンプルなボタンがあります。クリックすると、データベースのデータを含む電子メールがユーザーに送信されます。

実際のところ、このボタンを数回押すと、ほとんどメールが送信されません。

そこで、ローダーなどを設置して、ユーザーが数秒待つ必要があることを認識し、そのリンクを再度クリックできないようにしたいと考えています。

このようなことを試しましたが、うまくいきません..私は JS について本当に初心者です。

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



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

編集 ：OK、コードを更新したところ、次のようになりました。

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

それは機能しません。リンクをクリックしなくても、ajax ローダーが表示されます。

助けてくれてありがとう、

Answer 1

ローダーを非表示にすることから始めます。これで問題は解決するはずです。

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