modal window is not showing when loading dynamic data with ajax

Question

Hi if anybody can help me to solve this issue, i will grateful because i am trying since 2 days. I have the one page with list of contracts in the table and one button to open modal window with dynamic data based on the id of the button, but when i am clicking the button its not showing modal window. my HTML code for the contract list is

<table id="MyTable" class="table table-md table-bordered table-hover table-lightfont">
  <thead class="thead-light">
    <tr>
      <th>ID</th>
      <th>Customer Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>ABCD</td>
      <td>
        <button type="button" name="view" id="1" class="btn btn-light btn-sm shadow-none view_data">
        More Details
        </button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>XYZ</td>
      <td>
        <button type="button" name="view" id="2" class="btn btn-light btn-sm shadow-none view_data">
        More Details
        </button>
      </td>
    </tr>
  </tbody>
</table>

here is my modal window code

<div id="contractModal" class="modal show fade" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title text-info"><?php echo $module ?></h6>
      </div>
      <div class="modal-body pt-0">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">
          <i class="fa fa-close"></i>
          <?php echo GetBilingualLabels($_SESSION['$language'],"BUTTON","BACK"); ?>
        </button>
      </div>
    </div>
  </div>
</div>

here is my JavaScript code to open modal window with dynamic data

<script>
  $(document).ready(function(){
    $('.view_data').click(function(){
      var ccpid=$(this).attr("id");
      //alert(ccpid);
      $.ajax({
        url:"showdata.php",
        method:"POST",
        data:{},
        success:function(data){
          $('.modal-body').html(data);
          $('#contractModal').modal("show");
        }
      });
    });
  });
</script>

here is my showdata.php code

<?php
  $output='';
  $output .="<label>Contract code</label>";
  echo $output;
?>

Can you open it manually? Like typing `$('#contractModal').modal("show")` in the console — Carl Binalla, Jan 07 '20 at 08:27
if i remove .ajax function and only write command $('#contractModal').modal("show"); then it is opening modal window. — MAK, Jan 07 '20 at 08:29
Can you check if it really is successful? Like logging the `data` first. — Carl Binalla, Jan 07 '20 at 08:31
`console.log(data);` in your success function. Or look in the **Network** tab in the developer's tool what does `showdata.php` returns — Carl Binalla, Jan 07 '20 at 08:32
i did this and tried to check console with inspect element, its showing me TypeError: $.ajax is not a function — MAK, Jan 07 '20 at 08:37
Open the network tab, reload the page, then do the whole process again, while the network tab is opened — Carl Binalla, Jan 07 '20 at 08:52
i did but the same thing, on the top i am seeing my parent page. thats it, no showdata.php in the ist — MAK, Jan 07 '20 at 08:55
Did you click the `More Details` button? If so, then somehow the `showdata.php` isn't being called — Carl Binalla, Jan 07 '20 at 08:59
yes i clicked more details button, then what is going wrong in my code? — MAK, Jan 07 '20 at 09:20
Please take a look at this - https://stackoverflow.com/questions/18271251/typeerror-ajax-is-not-a-function - may help. Also should be — T.Shah, Jan 07 '20 at 10:47

modal window is not showing when loading dynamic data with ajax

0 Answers0