如何在单击嵌套在循环中的按钮时弹出显示模态

Question

i'm trying to target buttons in the loop. each button upon click is supposed to pop up a modal with details unique to that particular invoice. but my code seem to getting only the first invoice when any of the button is clicked.

this is the loop with the modal



<?php
require 'connect.php'; 
require 'header.php'; 
 

?>


  <!-- modal -->

  <div class="modal fade print" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">

    <div class="modal-dialog" role="document">
      <div class="modal-content row" id="print">
        <address>
            <img src="small.png"><br/>
            #32 Adelabu Street,Uwani,Enugu<br/>
            Phone: [phone]
          </address>
        <address>
            Date:
          </address>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Customer Name</th>
              <th>Product name</th>
              <th>Quantity</th>
              <th>price</th>
              <th>total</th>
              <th>amount paid</th>
              <th>balance</th>
            </tr>
          </thead>
          <tbody class="details">
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>

              <td></td>



            </tr>

          </tbody>

        </table>
      </div>
    </div>
  </div>

  <div id="printarea">
    <table class="table table-bordered">

      <tbody class="details">
        <?php  
                            $get_invoice = "SELECT * FROM invoice ORDER BY id DESC";
                            $invoice_query = mysqli_query($connect,$get_invoice);
                            $invoice_rows = mysqli_num_rows($invoice_query);
                            while($full_rows=mysqli_fetch_array($invoice_query)) {?>
        <tr>
          <!-- the php code inside the id bracket is supposed to generate a unique id for each loop-->
          <td><input type="hidden" value="<?php echo $full_rows['identify']; ?>" id="but<?php echo $full_rows['name']; ?>"></td>
          <td>
            <?php echo $full_rows['date']; ?>
          </td>
          <td>
            <?php echo $full_rows['name']; ?>
          </td>
          <td>
            <?php echo $full_rows['goods_description']; ?>
          </td>
          <td>
            <?php echo $full_rows['quantity']; ?>
          </td>
          <td>
            <?php echo $full_rows['price']; ?>
          </td>
          <td>
            <?php echo $full_rows['total']; ?>
          </td>
          <td>
            <?php echo $full_rows['amount_paid']; ?>
          </td>

          <td>
            <?php echo $full_rows['balance'] ?>
          </td>
          <td><input type="button" class="btn btn-success" value="print"></td>
          <td><input type="button" value="delete" id="add" class="btn btn-danger"></td>

          <!-- the unique id generated is passed inside the onclick function to target specific invoice in the modal-->
          <td><button type="button" class="btn btn-warning" data-toggle="modaSS" data-target=".print" onclick="modal('but<?php echo $full_rows['name'];?>')" id="view">View</button></td>


          <!--DISPLAYING MODAL WITH INVOICE DETAILS-->
          <script type="text/javascript">
            function modal(invoice) {
              var identify = $("[id^='but']").val();
              var dataString = 'identify=' + identify;
              $.ajax({
                type: "POST",
                url: "modal.php",
                data: dataString,
                //cache: false,
                success: function(html) {
                  alert(html);
                }
              });
              return false;
            }
          </script>
        </tr>
        <?php } ?>
      </tbody>

    </table>
  </div>

  </div>

this is the this is where the ajax request is been proccessed


<?php

$identify = $_POST['identify'];
//connecting to server and selecting database
$connect = mysqli_connect('localhost','root','','sidney');

if (isset($_POST['identify'])) {
  $select = "SELECT * FROM `invoice` WHERE identify='$identify'";
  $query = mysqli_query($connect,$select);
  $get_number = mysqli_fetch_array($query,MYSQLI_ASSOC);
  if ($get_number) {
    echo $get_number['identify'];
    return $get_number['identify'];
  }else{
    echo "There was trouble locating the number";
  }
}
?>

</div>

Answer 1

try this I have just given the idea of how should you can open model and send data to the opened model:

 //Your Button HTML
<button type="button" class="your_next_button_class btn btn-warning" 
data-name="<?php echo $full_rows['name'];?>" 
data-toggle="modaSS" data-target=".print" id="view">View</button>

$('body').on('click', '.your_next_button_class', function(e) {

    var name = $(this).data('name');
    //As abouve example you can get any data using data arrribute
    // Now You can open a model on the same page you don't need to send data

    $.ajax({
        type: "POST",
        url: "modal.php",
        data: dataString,
        //cache: false,
        success: function(response) {
        // Here in response you get the $get_number['identify']; data.
          alert(response);

        //Now To Send this response to the model
        // If you are adding this value to hidden input then
        $('.hidden_input_class').val(response);

       // Or you for display this in as text
        $('.your_class_where_want_to_display').text(response);


          // THis is how you open the model
          $('.your_model_class').modal('show');

        }
      });
});

I am assuming that your query correct and valid data to ajax success.