当按钮在php foreach函数内单击时，通过id显示模态

Question

I have a button inside the foreach function of php. I have a modal which has an id corresponding to the button clicked. Now, what i want to do is when i click the button it shows the modal by id but the first button only works to show the modal and the other doesn't. what should i do? here is my code...

           <?php $count = 0;  ?>
                <?php foreach ($land_i as $li){ ?>
                <?php $count++ ?>
                    <tr>                             
                    <td><?= $li['date_approved'] ?></td>
                    <td><?= $li['status'] ?></td>
                    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal_<?= $li['lpf_no'] ?><?= $count ?>" data-backdrop="static" data-keyboard="false">Select</button>
                    </td>
                    </tr>
          <?php } ?>

I try to use count to generate it's unique number from the button. I know it's non-sense because each button has a unique id already. Here's my modal...

                <div class="modal fade modal_<?= $li['lpf_no'] ?><?= $count ?>" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">

                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                      </button>
                      <h4 class="modal-title" id="myModalLabel">In Progress...</h4>
                    </div>
                    <div class="modal-body">
                      <h4><?= $li['lpf_no'] ?></h4>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>

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

that's it. hopefully there's someone gonna help me this one. Here's another thing... i try to put the modal inside my foreach function. it works but the modal destroy and the design of the page too. so i prefer to place it outside the foreach function.

Answer 1

The problem is in your data-target. You append the count on to the end of the data-target in the loop (data-target=".modal_<?= $li['lpf_no'] ?><?= $count ?>), along with your modal itself: <div class="modal fade modal_<?= $li['lpf_no'] ?><?= $count ?> ... </div>. The problem is that $count does not reflect the current count; the loop has already finished by this point; $count now only refers to the last item.

Assuming you want a different modal for each item, you will indeed need to output the modals inside of a loop -- I'd actually recommend making use of a second loop for this, so as not to have to worry about things like closing your table:

<table>
<?php $count = 0; ?>
<?php foreach ($land_i as $li) { ?>
    <?php $count++ ?>
    <tr>                             
    <td><?= $li['date_approved'] ?></td>
    <td><?= $li['status'] ?></td>
    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal_<?= $li['lpf_no'] ?><?= $count ?>" data-backdrop="static" data-keyboard="false">Select</button>
    </td>
    </tr>
<?php } ?>
</table>

<?php $count = 0; ?>
<?php foreach ($land_i as $li) { ?>
    <?php $count++ ?>
    <div class="modal fade modal_<?= $li['lpf_no'] ?><?= $count ?>" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
        ...
    </div>
<?php } ?>

This way you will end up with a different modal for each item, and they will all have the correct data-target reference. It also shouldn't break your formatting due to the closure of the <table> before starting the second loop.