محمل على رابط 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>

يحرر :حسنًا، لقد قمت للتو بتحديث الكود الخاص بي ولدي هذا:

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