I'm attempting a rather simple task, but I'm encountering difficulties.
The issue I'm facing involves a modal that prompts the user for confirmation. Once the user clicks "confirm," a URL is fetched, triggering a background process. During this period, a loading spinner should be displayed on the button. I've experimented with various onclick events for the button. While the console shows that the function is being activated, the button itself fails to change upon clicking "confirm."
What is the correct method to update the button in the modal during the loading process? There's no need to revert the button's state, as the user will be redirected to a different page once the process is complete.
My setup involves Bootstrap 4 and Django.
This is the HTML for the Modal:
<!-- Modal -->
<div class="modal fade" id="Modal{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="ModalLabel{{ forloop.counter }}" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Are you sure you want to delete this Application?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
<br>
<b>Name:</b> {{item.Name}} <br>
<b>Version:</b> {{item.Version}} <br>
<b>Publisher</b> : {{item.Publisher}} <br>
<b>Language:</b> {{item.Language}} <br>
<b>Command Line:</b> {{item.CommandLine}} <br>
<br>
Depending on the application size, this can take a while.<br>
Please wait, till this windows closes automatically
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a href="{% url 'delete_application' share.share.Name share.share.Path item.Name %}"class="btn btn-danger" id="btn-delete">Confirm</a>
</div>
</div>
</div>
</div>
EDIT 1
To alter the button content, I implemented the following:
$(document).ready(function(){
$('#btn-delete').on('click', function () {
var text=$('#btn-delete').text();
if(text === "Confirm"){
$(this).html('Loading');
}
});
});
However, this only works when the button is not within the Popup Modal. The button within the Modal remains unaffected by the function.