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

时间:2017-07-15 11:19:19

标签: javascript php ajax mysqli

我试图在循环中定位按钮。点击后的每个按钮都应该弹出一个模式,其中包含该特定发票的唯一详细信息。但是当我点击任何按钮时,我的代码似乎只获得了第一张发票。



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: 08045454554
          </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>
&#13;
&#13;
&#13;

&#13;
&#13;
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";
  }
}
?>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

尝试这个我刚刚给出了如何打开模型并将数据发送到打开的模型的想法:

 //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');

        }
      });
});

我假设您的查询是正确且有效的数据,以便ajax成功。