Ajax call returns same result

Question

I have a jquery modal button, where I want to display information from my database.

I have a field in the database where I want everything to be identified by it is called "number" The modal button is displayed in a table which is already being looped from a SQL query displaying all entries

while ($row = getarray($res)){

    <tbody>
    <tr>
    <td> <? $row["state"] ?> </td>
    <td><? $row["number"] ?></td>
    <td>
    <button type="button" class="btn btn-primary" onclick="detailsmodal(<?
    $row["number"])">Description</button>
  </td>
  </tr>


<!-- Modal Button -->
<button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)>Modal Button</button>
<!-- Code for modal -->
<?php
$number =$_POST["number"];
$number =(int)$number;
$modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '$number' ");
$result2 = myfunction_fetch_array($modalsql);
ob_start();

?>

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title"> <?= $result2['number']?></h4>
  </div>
  <div class="modal-body">
    <p><strong>Field 1:</strong><?= $result2['number']?> </p>
    <p><strong>Field 2:</strong><?= $result2['field_2']?>  </p>
    <p><strong>Field 3</strong><?= $result2['field_3']?> </p>
    <p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
    <p><strong>Field 5:</strong><?= $result2['field_5']?></p>
    <p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
  </div>
  </div>
  </div>
  </div> 

<?php 
ob_get_clean();
?>

<!-- Script for the modal-->
<script>
    function detailsmodal(number){

        var data = {"number" : number};
        jQuery.ajax({
        url : "/page1/page2",
        method : "post",
        data : data,
        success: function(){
            jQuery("body").append(data);
            jQuery("#myModal").modal("toggle");
        },
        error: function(){
            alert("Something went wrong!");
        }
        });
    }
</script>

Ideally, the information should be changed based on the different items that are being clicked. but it is staying the same.

Answer 1

Please try to use following code , there are so many typo mistakes you have in your code.

<?php while ($row = getarray($res)){ ?>

        <tbody>
          <tr>
            <td> <? $row["state"] ?> </td>
            <td><? $row["number"] ?></td>
            <td>
              <button type="button" class="btn btn-primary" onclick="detailsmodal(<?=
              $row["number"]) ?>">Description</button>
            </td>
          </tr>


          <!-- Modal Button -->
          <button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)">Modal Button</button>
          <!-- Code for modal -->
          <?php
          $number =$_POST["number"];
          $number =(int)$number;
          $modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '".$number."' ");
          $result2 = myfunction_fetch_array($modalsql);
          ob_start();

          ?>

          <div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
            <div class="modal-dialog">
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title"> <?= $result2['number']?></h4>
                </div>
                <div class="modal-body">
                  <p><strong>Field 1:</strong><?= $result2['number']?> </p>
                  <p><strong>Field 2:</strong><?= $result2['field_2']?>  </p>
                  <p><strong>Field 3</strong><?= $result2['field_3']?> </p>
                  <p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
                  <p><strong>Field 5:</strong><?= $result2['field_5']?></p>
                  <p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
                </div>
                <div class="modal-footer">
                 <button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
               </div>
             </div>
           </div>
         </div>

         <?php
         ob_get_clean();
         ?>

         <!-- Script for the modal-->
         <script>
          function detailsmodal(number){

            var data = {"number" : number};
            jQuery.ajax({
              url : "/page1/page2",
              method : "post",
              data : data,
              success: function(){
                jQuery("body").append(data);
                jQuery("#myModal").modal("toggle");
              },
              error: function(){
                alert("Something went wrong!");
              }
            });
          }
        </script>