Call function after opening Modal

Question

Call function after opening Modal

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have this Jquery code:

<script>
jQuery(document).ready(function(){
  // Numero de click
var totalClicks = 0;

jQuery('#addpayment').submit(function(){
    var dados = jQuery( this ).serialize();

     // Verifica se o valor da variável totalClicks representa 3 clicks.
    // Caso o número seja menor que 3 clicks, ignora esse trecho
    if (totalClicks >= 2) {
       alert("redirecionando");
       windows.location......
            return false;   
    }

}


           //Soma o valor de totalClicks + 1
  totalClicks++;

});

</script>

And this modal:

<form action="" method="post" id="addpayment" name="addpayment" class="form-
 horizontal">

<!-- Modal -->

<div class="container">

  <!-- Trigger the modal with a button -->



  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h6 class="modal-title">Teste - Modal </h6>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

<!--Fim Modal -->

I needed that after each click appeared the modal above, and in the third click, redirected the user to a page. The modal works, but the jquery (click) events do not.

javascript jquery

asked by anonymous 06.03.2018 / 17:28

2 answers

0

According to the example, the increment of the variable totalClicks is outside the scope of the anonymous function, so when the event submit occurs the value is not incremented.

The correct one would be:

<script>
  // Numero de click
  var totalClicks = 0;

  jQuery(document).ready(function(){
      jQuery('#addpayment').submit(function(){
          e.preventDefault();
          var dados = jQuery( this ).serialize();

          // Verifica se o valor da variável totalClicks representa 3 clicks.
          // Caso o número seja menor que 3 clicks, ignora esse trecho
          if (totalClicks >= 2) {
              alert("redirecionando");
              windows.location......
              return false;   
          }

          //Soma o valor de totalClicks + 1
          totalClicks++;
      }
  });
</script>

06.03.2018 / 18:09

Open pdf by URL and PDFView InputStream Update CakePHP Version to latest

score 1 · Accepted Answer

First thing to note is: if you submit the form, the variable totalClicks will be lost because it will either reload the current page or go to another page.

If you are going to use Ajax on submit , you have to put the e.preventDefault(); method to prevent reloading the page.

Below, I rearranged the code to work the redirect after the third click on the Send button.

What was done?

When the value of the variable totalClicks is equal to 1, the value of the data-toggle attribute of the button has been removed, preventing the modal from opening again, and on the next click the redirection will occur.

jQuery(document).ready(function(){

// Numero de click
   var totalClicks = 0;

   jQuery('#addpayment').submit(function(e){
      e.preventDefault();

      var dados = jQuery( this ).serialize();

      // Verifica se o valor da variável totalClicks representa 3 clicks.
      // Caso o número seja menor que 3 clicks, ignora esse trecho
      if (totalClicks >= 2) {
        alert("redirecionando");
        window.location = "alguma_página";
         return false;   
      }else if(totalClicks == 1){
         $("button[data-toggle='modal']").attr("data-toggle","");
      }

      //Soma o valor de totalClicks + 1
      totalClicks++;
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<form action="" method="post" id="addpayment" name="addpayment" class="form- horizontal">

   <!-- Modal -->

   <div class="container">

      <!-- Trigger the modal with a button -->

      <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
         Enviar
      </button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
         <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h6 class="modal-title">Teste - Modal </h6>
               </div>
               <div class="modal-body">
                  Corpo da modal
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               </div>
            </div>
         </div>
      </div>
   </div>
</form>