Loader on a link ASP.NET MVC 5
-
21-12-2019 - |
Question
I'm trying to do something very simple, but it doesn't work for all browser... I need your help here :
<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>
Here is a simple button, When I click on, it gonna send an Email to user with data from database.
The fact is, if I press on this button few times, it's gonna send few mails.
So, I'd like to put a loader or something like this, so the user know he have to wait few secs, and he won't be able to click on that link again.
I tried something like this but that's not working.. I'm really new with 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 I just updated my code and I have this :
<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>
That's not working, I see the ajax loader even if I don't click on the link..
Thanks for helping,
Solution
Start with the loader hidden, that should solve your problem:
<div class="loading" id="modalSending" align="center" style="display:none">