CODEWITHSUNDEEP
phpjquerytwitter-bootstrap
Abu Nooh
Abu Nooh

Reputation: 856

Load modal pop up in foreach loop

I have a query that retrieves multiple rows from the database. A column in the query is notes, I want to show that in a modal pop up.

I can within the foreach loop set it to load one modal for each row, but that will mean x amounts of modals depending on the number of rows.

Is there a way to load one modal and pass a value (from DB) to that so I don't have to have so many modals.

Heres what I have tried but like I say its creating a modal for each row:

foreach($data as $row) { $id = $row['id']; ?>
<div class="modal fade" id="myModalnote<?php echo id;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                </button>
                <h4 class="modal-title" id="myModalLabelnote">Notes</h4>
            </div>
            <div class="modal-body">
                <?php 
                    $data = $conn->query('SELECT * FROM notes WHERE id = '.$id); 
                        foreach($data as $row) { 
                            echo '<p>'.$row['note'].'</p>';
                        }
                ?>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
}

Is there a way to overcome this and just create one modal and then pass the $id to it?

Upvotes: 1

Views: 9474

Answers (1)

Zolt&#225;n Tam&#225;si
Zolt&#225;n Tam&#225;si

Reputation: 12754

You should have one static modal, and change its contents via javascript on a link click for example in each row. You can gather notes into a JS object with your IDs as fields. Then you can refer to an actual ID in your popup link with the data-* attribute. Then handle the click of each link, fetch the notes, put them into your modal body, and show the modal.

<div class="modal fade" id="myModalnote" tabindex="-1" 
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabelnote">Notes</h4>
      </div>
      <div class="modal-body">
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
  var notes = {};

<?php
  $data = $conn->query('SELECT * FROM notes WHERE id = '.$id);
  foreach($data as $row) {
    echo 'notes["'.$row['id'].'"] = "'.$row['notes'].'";';
  }
?>

$(document).on("click", ".noteslink", function() {
  var id = $(this).data("rowid");
  $("#myModalnote .modal-body").html(notes[id]);
  $("#myModalnote").modal("show");
});

</script>

<?php
  foreach($data as $row) {
    echo '<a class="noteslink" data-rowid="'.$row['id'].'">Show note for '.$row['id'].'</a>';
  }
?>

Sorry, code is not tested, but should give you the idea. Also note that while this technique works, it's far from the most elegant and precise way. For example you should consider some escaping not to cause szntax error in the constructed javascript object.

Another good solution is to create a hidden DIV in your loop, which contains the notes. Then zou can extract the notes from that in your event handler with basically the same techniques.

Upvotes: 2

Related Questions