CODEWITHSUNDEEP
javascriptbootstrap-4django-templatesbootstrap-modal
Suzabi
Suzabi

Reputation: 11

How to add Spinner to Button in Modal, during background process?

I'm trying a very simple thing, but I can't get it to work.

I have a modal which asks for a confirmation from the user. When the user clicks "confirm" a url is retrieved which triggers a background process. During this time the button should get a loading spinner. I have already tried with different onclick events on the button. In the console I can see that the function triggers, however the function does not change the "confirm" button.

What is the right way to change the button in the modal during loading time? It is not needed to change the Button back, since the user will be redirected to a different page, after the process is finished.

I'm using Bootstrap 4 and Django.

My 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">&times;</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 change what the button is showing, I used this:

$(document).ready(function(){
 $('#btn-delete').on('click', function () {
  var text=$('#btn-delete').text();
  if(text === "Confirm"){
    $(this).html('Loading');
 }
});
});

But it works only, if the Button is not on the Popup Modal. The button inside the Modal is not affected by the function.

Upvotes: 0

Views: 706

Answers (2)

Suzabi
Suzabi

Reputation: 11

So i have found a way by myself. It is a dirty one, but it worked. The problem was, that I had to change the modals html content, since the button is a part of it.

The steps I did to fix my problem:

First I added an ID to my btn-delete. Since I'm using django i creating the ids with an running number. So i decided to add number of to the modal to my btn-delete. And add an onclick function to it, that sends the buttin id into the function.

<a href="{% url 'delete_application' share.share.Name share.share.Path item.Name %}"class="btn btn-danger" id="btn-delete{{ forloop.counter }}" onclick="showLoading(this.id)">Confirm</a>

after this i was able to get it done with this js:

  function showLoading(id){
    // get id of modal and button by cutting the id out of the button id
    id = id.replace(/^[^\d]+/, "");
    // get the modal id,
    var mymodal = $('#Modal' + id);
    // find the delete button and change the html
    mymodal.find('#btn-delete' + id).html('Confirm <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
    
  }

It is not nice, but it seems to work for me.

Upvotes: 1

Ali Tarani
Ali Tarani

Reputation: 158

consider 2 state of button write 2 function 1 for make button disable and activate loading 2 for make it enable and remove loading.

in functions perform what U want. i prefer place a spinning span in to the button then toggle the appearance class. and toggle disable property based on functionality.

if functions done, now U can before UR time costing operation, make it loading unclickabel button. after performing, make it normal

Upvotes: 0

Related Questions