문제

나는 아주 간단한 것을하려고하지만 모든 브라우저에서는 작동하지 않습니다 ... 나는 당신의 도움이 필요합니다 :

<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 로더가 표시됩니다.

돕기에 감사드립니다

도움이 되었습니까?

해결책

로더 숨김으로 시작하여 문제를 해결해야합니다 :

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top