Bootstrap modal does not show with PHP

Question

I want to show a bootstrap modal when I click on the button for each specific ID a new modal. But the problem is that I only see the dark background from the modal when I click on the button.

Here is the code where I generate the buttons with specific id's for the modals:

<div class="panel-body">
  <table class="table table-striped table-hover">
      <tr>
          <th>Website</th>
          <th>E-mail</th>
          <th></th>
          <th></th>
      </tr>
      <?php
          if ($result->num_rows > 0) {
                // output data of each row
                while($row = $result->fetch_assoc()) {
                    echo "<tr id='". $row["inzendingId"]. "'><td id='row_". $row["websiteNaam"]. "'>" . $row["websiteNaam"]. "</td><td id='row_". $row["Email"]. "'>" . $row["Email"]. "</td><td></td><td style='float: right; width: 100%;'><a class='btn btn-primary' id='hoi' type='button' data-toggle='modal' data-target='#". $row["inzendingId"]. "' onclick='fillEditFields()' style='float:right; margin-right: 5px;'>Selecteren</a> </td></tr>";
                }
            } else {
                echo "0 results";
            }
      ?>
  </table>
</div>

And here is the code where I generate the modals:

<?php
  if ($result2->num_rows > 0) {
        // output data of each row
        while($row = $result2->fetch_assoc()) {
            echo "<div class='modal fade' id='". $row["inzendingId"]. "' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
     <form action='php/edit.php?id=type' method='post' id='formTypeBewerken' enctype='multipart/form-data'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
        <h4 class='modal-title' id='myModalLabel'>Type bewerken</h4>
      </div>
      <div class='modal-body'>
       <div class='form-group'>
            <label>Type ID</label>
            <input type='text' id='typeId' name='typeid' class='form-control' readonly='readonly'>
        </div>
        </div>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Sluiten</button>
      </div>
    </form>
    </div>
  </div>
</div>";
        }
    } else {
        echo "0 results";
    }
?>

Thanks for your time!

Maybe because your go to the else section ? Have you tested this case ? — Greco Jonathan, Apr 12 '18 at 10:16
@Hooli It is not going to the else section because I can see the modal in the code, but when I click on the button to show the modal only the dark background of the modal shows the content of the modal stays behind. — Jari Rengeling, Apr 12 '18 at 10:20
You have more than a show issue here, your form is typically the same for all of your modals, for your first problem I've to think about it — Greco Jonathan, Apr 12 '18 at 10:23
Hum i think I know, try to put your modals at a different position of your code, consult this https://stackoverflow.com/questions/16093568/bootstrap-modal-not-displaying — Greco Jonathan, Apr 12 '18 at 10:28
Do you know that all the HTML is being generated correctly? You have two different result sets being looped, which I would assume are not the same dataset. — kchason, Apr 12 '18 at 10:34

Rahul · Accepted Answer · 2018-04-12T14:49:37.053

1- you are generating lot of modal which is not good.

2-make modal template and use ajax for particular id.

3- other wise if you want to use same code which is given above then you need to do your modal and your button should in same page. you got black background that'because target event is not able to find modal for example this code

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
    echo "<tr id='". $row["inzendingId"]. "'><td id='row_". $row["websiteNaam"]. "'>" . $row["websiteNaam"]. "</td><td id='row_". $row["Email"]. "'>" . $row["Email"]. "</td><td></td><td style='float: right; width: 100%;'><a class='btn btn-primary' id='hoi' type='button' data-toggle='modal' data-target='#". $row["inzendingId"]. "' onclick='fillEditFields()' style='float:right; margin-right: 5px;'>Selecteren</a> </td></tr>";
}
} else {
echo "0 results";
}

and this code

if ($result2->num_rows > 0) {
        // output data of each row
        while($row = $result2->fetch_assoc()) {
            echo "<div class='modal fade' id='". $row["inzendingId"]. "' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
     <form action='php/edit.php?id=type' method='post' id='formTypeBewerken' enctype='multipart/form-data'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
        <h4 class='modal-title' id='myModalLabel'>Type bewerken</h4>
      </div>
      <div class='modal-body'>
       <div class='form-group'>
            <label>Type ID</label>
            <input type='text' id='typeId' name='typeid' class='form-control' readonly='readonly'>
        </div>
        </div>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Sluiten</button>
      </div>
    </form>
    </div>
  </div>
</div>";
        }
    } else {
        echo "0 results";
    }

should be in same page.

4-if you are not able to fix then use this method your td should be like this

<tr>
   <td id="demo" onclick="getId(this.id)">Click</td>
</tr>

and JavaScript should be like this

<script type="text/javascript">
    function getId(id){
        $('#'+id).modal('show');
    }    
</script>

Bootstrap modal does not show with PHP

1 Answers1