I have this following Ajax call which is trying to get some data in certain intervals Content of the Ajax call page qaVtagAjax.php as below As you can see there is a button in the form called assignQaOa. I want to trigger a modal window by clicking this button as show earlier As a first step, I tried to alert

Ajax called page with button not triggering modal window with form variable

I have this following Ajax call which is trying to get some data in certain intervals

$(document).ready(function() {
  x();

  function x() {
    var FD = new FormData($('form')[0]);

    $.ajax({
      type: "POST",
      url: "qaVtagAjax.php",
      processData: false,
      contentType: false,
      data: FD,
      success: function(result) {
        $("#inputFieldDisplay").html(result);
      }
    });
    return false;
  }
  setInterval(x, 5000);

});

$("#assignQaOa").click(function() {
  //            trigger modal
});

Content of the Ajax call page qaVtagAjax.php as below

echo '<form method="post"> <div class="card" style="position: relative; border-color: black; !important ">
<div class="card-body">
    <div class="row">
        <input type="text" name= "srNum" id="srNum" value = "someValue" hidden>
        <div class="col-sm"><button class="btn-primary modalButton" type="submit" name = "assignQaOa" id = "assignQaOa" title="Click to assign to some operator">Assign</button></div>
    </div>
    </div>
</div>
</form>
<br>';

As you can see there is a button in the form called assignQaOa. I want to trigger a modal window by clicking this button as show earlier

$("#assignQaOa").click(function() {
  //trigger modal by doing Eg: $('#myModal').modal('show');
  alert("Modal window showing");
});

As a first step, I tried to alert some message. But nothing is happening when I click the button. Does anyone have some idea why this way?

NB: Actual qaVtagAjax.php file has more html and php contents. Those are working correctly. So I simplified that codes for understanding the problem.

Edit 1

Following is the modal codes that I am using from bootstrap

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <input type="text" id="tagSerial" name="tagSerial" hidden>
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Also I edited the button click code as below based on the suggestion. This time if I gave a simple alert, it is working. But modal is not showing

$(document).on("click", "#assignQaOa", function() {
  //Alert is working. Eg: alert("some message");
  $('#exampleModalCenter').modal('show'); //This is not working
});

Edit 2

Some post suggested the possibility that two time bootstrap.js was typed in the document. But for my case, it is not the case too. I only typed it once and I am using as below

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Does anyone know why this happening? As I mentioned in comments, if I removed the class fade from modal, then modal will show for a split second with this $('#exampleModalCenter').modal('show'); code

Edit 3 By doing e.preventDefault(), I am able to stop the form submission and show modal successfully. But now I have an element in the modal window that supposed to get some $_POST values from form submission. How can I get that $_POST value in the modal at this situation? My Javascript code as below

$(document).on("click", "#assignQaOa", function(e) {
  $('#exampleModalCenter').modal('show');
  $('#tagSerial').val($("#srNum").val());
  e.preventDefault();
});

The following is the element in the modal window

<input type="text" id="tagSerial">

Answer

After many trial and errors, I found issue was due to I am using type = submit for the button. When I changed type = button, modal triggered and showed correctly. But I am still puzzled why when I used type = submit and removed the class fade, modal showing for a split second. Probably there is a work around to show it correctly too. I hope some expert from stack overflow can find out and tell me the problem.

Anyway I still couldn’t use this type = button for my scenario due to I need to get the values from a form submission when this button clicked. If use type = button, I cannot submit and get the values of the form through a $_POST method.

Edit 1

After got help from stack overflow member @Swati, realized that submit will refresh the page and that is why when used submit, modal is showing only for a split second. With her help I modified the code as below and able to solve my problem

$(document).on("click", "#assignQaOa", function(e) {
  $('#exampleModalCenter').modal('show');
  var sr = $(this).closest(".card-body").find("input[name='srNum']").val();
  $('#tagSerial').val(sr);
  e.preventDefault();
});

The above code will stop form submission. Also it will grab the input field srNum value and show it in the modal even without submitting form.

Advertisement

Answer