MCM MCM - 1 month ago 14
HTML Question

Display a bootstrap dynamic modal

I am trying to display a modal when pressing the button "Vezi rezolvare"

enter image description here

I have the following code for the button:

<div class="col-md-4 text-center patrat-block">
<div class="thumbnail">
<img class="img-responsive" src="img/LogoProbleme/pg1logo-v2.jpg" alt="">
<div class="caption">
<h3>Problema 1<br>
<small>Gradina</small>
</h3>
<p>Află dimensiunile grădinii</p>
<ul class="list-inline">
<li>
<a href="probleme.php?id=1&category=g"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Problema"><span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare </button></a>
</li>

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


And the modal content + php :

<?php
if(isset($_GET['id'])&&isset($_GET['category']))
{
$id=$_GET['id'];
$category=$_GET['category'];
$sql = "SELECT cerinta, rezolvare FROM probleme WHERE id='".$id."'AND category='".$category."'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {

while($row = $result->fetch_assoc())
{
$cerinta=$row["cerinta"];
$rezolvare=$row["rezolvare"];
}
$_SESSION["cerinta"]=$cerinta;
$_SESSION["rezolvare"]=$rezolvare;
}
}
?>
<div id="Problema" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Problema</h4>
</div>
<div class="modal-body">
<h4>Cerinta</h4>
<div class="well">
<?php echo $cerinta;?>
</div>

<h4>Rezolvare</h4>
<div class="well">
<?php echo $rezolvare;?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Inchide fereastra</button>
</div>
</div>

</div>
</div>


What this is trying to accomplish is to show a modal with some information in my database. I checked and the values are stored successfully in $cerinta and $rezolvare.

It seems like when the button is pressed, there is a fast fade and I am redirected to the top of the page, without showing the modal. I put an
<a href="probleme.php?id=1&category=g">
so I know what button has been pressed, but it seems like it refreshes the page and the modal isn't displayed. How can I let the modal be displayed?

Answer

Nesting a <button> inside an achor <a> is not valid html syntax because it can't tell which one was clicked. Also the anchor has an href different than '#' so it's just redirecting you to probleme.php?id=1&category=g. You can modify your code using as follows (not tested):

  1. Remove the button from inside the anchor and change the anchor to:
<a href="probleme.php?id=1&category=g" class="btn btn-primary"
   data-toggle="modal" data-target="#Problema">
    <span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare 
</a>
  1. Have the template of the modal somewhere in your html:
<div id="Problema" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Problema</h4>
            </div>
            <div class="modal-body">
                Some fine body
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Inchide fereastra
                </button>
            </div>
        </div>
    </div>
</div>
  1. Modify your php to return only the body of the modal:
<?php
    // Some good php
    echo("
        <h4>Cerinta</h4>
        <div class=\"well\">
            {$cerinta)}
        </div>
        <h4>Rezolvare</h4>
        <div class=\"well\">
            {$rezolvare}
        </div>";
// The modal body is returned by php
?>
  1. Use ajax to retrieve the modal body and subsequently open the modal. Something in the lines of:
$(document).ready(function() {
    // Assign some id to the anchor say id="myAnchor"
    $('#myAnchor1').click(function(e) {
        e.preventDefault();
        // get the modal
        var modalToOpen = $($(this).data("data-target"));
        var url = $(this).attr("href");
        var request = $.get(url);
        request.done(function(response) {
             // get modal
             modal.find(".modal-body").html(response);
             modal.modal("show");
        });
    }); 
});