CODEWITHSUNDEEP
phptwitter-bootstrapbootstrap-modal
Jari Rengeling
Jari Rengeling

Reputation: 326

Bootstrap modal does not show with PHP

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!

Upvotes: 0

Views: 1164

Answers (1)

Rahul
Rahul

Reputation: 1615

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>

Upvotes: 1

Related Questions