javascript - Modal not looping properly
Trying to add my modal to my table where I am already looping my data from the database but the modal only gets the first data from the loop, While the table loops perfectly. How do I get the modal to loop appropriately and would like to know in detail what I am missing?
Would a multidimensional array work? or the modal should not be called in the table? Tried the last bit and it did not work also.
<div class="table100">
<table id="p" class="table table-bordered" style="width:100%">
<thead>
<?php
$que = mysqli_query($connection, "SELECT * FROM account WHERE account_no = '$acc_no' && client_id ='$id'");
$q = mysqli_fetch_array($que);
$acc_id = $q['id'];
$result = mysqli_query($connection, "SELECT * FROM account_transaction WHERE (account_no = '$acc_no' && int_id = '$sessint_id') && (transaction_date BETWEEN '$std' AND '$endx') ORDER BY transaction_date ASC");
?>
<tr class="table100-head">
<th class="column1">Transaction-Date</th>
<th class="column2">Value Date</th>
<th class="column3">Reference</th>
<th class="column4">Debits(₦)</th>
<th class="column5">Credits(₦)</th>
<th class="column6">Balance(₦)</th>
<th></th>
</tr>
</thead>
<tbody>
<?php if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
$nxtbal = $row["running_balance_derived"];
?>
<tr>
<!-- <td></td> -->
<td class="column1"><?php echo $row["transaction_date"]; ?></td>
<td class="column2"><?php echo $row["created_date"]; ?></td>
<?php
if ($row["transaction_type"] == "") {
$desc = "Deposit";
} else if ($row["transaction_type"] == "") {
$desc = "Withdrawal";
} else if ($row["transaction_type"] == "loan_disbursement") {
$desc = "Loan Disbursment";
} else if ($row["transaction_type"] == "percentage_charge") {
$desc = $row["description"];
} else if ($row["transaction_type"] == "flat_charge") {
$desc = $row["description"];
} else {
$desc = $row["description"];
}
?>
<td class="column3"><?php echo $desc; ?></td>
<td class="column4"><?php echo number_format($row["debit"], 2); ?></td>
<td class="column5"><?php echo number_format($row["credit"], 2); ?></td>
<?php
// $newnext = mysqli_query($connection, "SELECT transaction_date, running_balance_derived, RunningTotal = SUM(running_balance_derived) AS OVER (ORDER BY transaction_date ROWS UNBOUNDED PRECEDING) FROM account_transaction WHERE account_id = '$acc_id' && (int_id = $sessint_id && branch_id = '$branch') && (transaction_date BETWEEN '$std' AND '$endx') ORDER BY transaction_date ASC");
// $mink = mysqli_fetch_array($newnext);
// $qwe = $mink["running_balance_derived"];
?>
<td class="column6"><?php echo number_format($nxtbal, 2); ?></td>
<td>
<a href="" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit</a>
<!-- Button trigger modal -->
<!-- POP UP BEGINS -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Reverse Transaction</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="../functions/transactions/reversal.php" method="POST">
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating" for="">ID: </label>
<input class="form-control" type="number" name="id" placeholder="" readonly value="<?php echo $row["id"]; ?>">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating" for="">Account_no: </label>
<input class="form-control" type="text" name="account_number" placeholder="" readonly value="<?php echo $row["account_no"]; ?>">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating" for="">Date: </label>
<input class="form-control" type="date" name="transaction_date" placeholder="" readonly value="<?php echo $row["transaction_date"]; ?>">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating" for="">Amount:</label>
<input class="form-control" type="number" name="amount" placeholder="" readonly value="<?php echo $row["amount"]; ?>">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating" for="">Receipt Number</label>
<input class="form-control" type="number" placeholder="" readonly value="<?php echo $row["transaction_id"]; ?>">
</div>
</div>
<button type="button" type="submit" class="btn btn-primary">Reverse</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- POP UP ENDS -->
</td>
</tr>
<?php
}
}
?>
<!-- <th></th> -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Answer
Solution:
Modal id will be same for all of your modals so it will trigger only one. Please change put the modal out side the loop and pass the data on an event or change the modal id by auto generated id to make it unique.
Answer
Solution:
As @keerthi Vijay Mentioned the issue I had was with the ids of the modal, So for a code example on how to sort that out.
<td>
<a href="" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal<?php echo $row["id"]; ?>">Edit</a>
<!-- Button trigger modal -->
<!-- POP UP BEGINS -->
<div class="modal fade" id="exampleModal<?php echo $row["id"]; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Reverse Transaction</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="../functions/transactions/reversal.php" method="POST">
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating" for="">ID: </label>
<input class="form-control" type="number" name="id" placeholder="" readonly value="<?php echo $row["id"]; ?>">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating" for="">Account_no: </label>
<input class="form-control" type="text" name="account_number" placeholder="" readonly value="<?php echo $row["account_no"]; ?>">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating" for="">Date: </label>
<input class="form-control" type="date" name="transaction_date" placeholder="" readonly value="<?php echo $row["transaction_date"]; ?>">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating" for="">Amount:</label>
<input class="form-control" type="number" name="amount" placeholder="" readonly value="<?php echo $row["amount"]; ?>">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating" for="">Receipt Number</label>
<input class="form-control" type="number" placeholder="" readonly value="<?php echo $row["transaction_id"]; ?>">
</div>
</div>
<button type="button" type="submit" class="btn btn-primary">Reverse</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- POP UP ENDS -->
</td>
All I did was concatenate the ID I was getting from my db to the modal id and viola you have a dynamic ID at hand. Dropping these just incase you get the same problem and you are a bit confused on how to apply the solution mentioned earlier.
Source