multiple ajax call firing when we open modal multiple times

user_1770199 0
Viewed 836

I have a bootstrap modal which is loaded to DOM after ajax call. I have two buttons in my modal dialog. I have to call an ajax request when I click the #proceed button in the dialog modal. When I click the Cancel button, the modal will close immediately. The problem is when I click the #proceed button, it will be fire ajax request to the total number of times that I have clicked the modal dialog. In simple words, I have clicked modal dialog for 4 times and clicked the Cancel button to close , and when I click the #proceed button for the 5th time, it will fire ajax call 5 times. I have tried many things to reset the modal dialog, but it's not working.

Modal dialog Code:
           <div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Warning!!</h4>
                  </div>
                  <div class="modal-body">
                  The details entered cannot be edited later.Are you sure to proceed?
                  </div>
                  <div class="modal-footer">
                    <button type="button"id="closemodal" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="proceed">Proceed</button>
                  </div>
                </div>
              </div>
            </div>

JS

         $(document).on("click", '#confirm button#proceed', function(e) {
              $('#confirm').modal('toggle');
          });
          $(document).on("click", '#confirm button#proceed', function(e) {
                e.preventDefault();
                $('#confirm').modal('toggle');
                       $.ajax({
                        type: 'POST',
                        url: "module/parents/covidqur/process.php",
                        processData: false,
                        contentType: false,
                        data: formData,
                        dataType:'text',
                         success:function(response){
                             console.log(5656565);
                             
                         }
                     });
                });
bootstrap-modal twitter-bootstrap-3 jquery ajax
4 Answers

Disable the button when you making the 1st AJAX request. It will prevent from the second AJAX request.

user_101065830

You have binding the click event on the #confirm button#proceed two times, try this code :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirm">
  Launch demo modal
</button>

<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Warning!!</h4>
                  </div>
                  <div class="modal-body">
                  The details entered cannot be edited later.Are you sure to proceed?
                  </div>
                  <div class="modal-footer">
                    <button type="button"id="closemodal" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="proceed">Proceed</button>
                  </div>
                </div>
              </div>
            </div>




    <script>

          $(document).on("click", '#confirm button#proceed', function(e) {

                $('#confirm').modal('toggle');

                       $.ajax({
                        type: 'POST',
                        url: "module/parents/covidqur/process.php",
                        processData: false,
                        contentType: false,
                        data: null,
                        dataType:'text',
                         success:function(response){
                             console.log(5656565);
                         },
                         complete: function() {
                            alert("An ajax request was fired.");
                         }
                     });
            });  
    </script>
  </body>
</html>

user_129195450

I had the same problem, a solution is to unbind click from #proceed button.

    $(document).on("click", '#confirm button#proceed', function(e) {
              $('#confirm').modal('toggle');

             $("#proceed").off('click').on('click', function(e){
                e.preventDefault();
                       $.ajax({
                        type: 'POST',
                        url: "module/parents/covidqur/process.php",
                        processData: false,
                        contentType: false,
                        data: formData,
                        dataType:'text',
                         success:function(response){
                             console.log(5656565);
                             $('#confirm').modal('hide');
                             
                         }
                     });
                });  
   });
user_95208750

I have added the following code in the click event of the modal button.This worked for me

$(document).on("click", '#proceed', function(e) {
                   e.stopImmediatePropagation();
                   e.preventDefault();
                   $('#confirm').modal('toggle');
                   --ajax call
});
user_17701990
Related