Twitter Bootstrap Question posted in

How to open twitter bootstrap modal in a PHP query

I’m trying to open a modal boostrap in this query. The problem I have is when I click to ‘More Info’ open all modals of the query, and i want to open only which I clicked. Thanks.

<?php

$consult= "SELECT * FROM `films`";
$result = $conexion -> query($consult); 

if ($result) {
    $cont3 = 0; //ID of the film

    while ($nfila = $resultado -> fetch_object()) {
        $film = "film".$cont3; //To make a unique ID to each film

        echo "<form role='form' id='$film'>
                <img src='images/".$nfila->image."'><br> 
                <h4>".$nfila->title." (".$nfila->year.") 
                <button type='button' class='btn btn-default' data-toggle='modal' data-target='.bs-example-modal-lg'>More Info</button></h4><br>

                <div class='modal fade bs-example-modal-lg' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel'>
                    <div class='modal-dialog modal-lg'>
                        <div class='modal-content'>
                            <div class='modal-header'>
                                <button tyle='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
                                <h4 class='modal-tigle'>".$nfila->title."</h4>
                            </div>
                            <div class='modal-body'>
                                <img src='images/".$nfila->image."'><br>
                                <p><strong>Original Title: </strong>".$nfila->tituloOriginal."</p>
                                <p><strong>Year: </strong>".$nfila->anio."</p>
                                <p><strong>Country: </strong>".$nfila->pais."</p>
                                <p><strong>Sinopsis: </strong>".$nfila->sinopsis."</p>
                            </div>
                            <div class='modal-footer'>
                                <button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button>
                            </div>
                        </div>
                    </div>
                </div>
        ";
        echo "</form>";
        $cont3++;
    }
} else {
     echo "There was a error to load the films";
}

?>
Tags:

3

Answers


  1. 0

    That’s because you’re opening targeting modal with bs-example-modal-lg class. And it’s same for all the modals.

    What you need to do is give unique class to each modal. To do this assign a class with counter at the end, which will give uniqueness to it.

    Update your code like this,

    while ($nfila = $resultado->fetch_object()) {
    $film = "film" . $cont3; //To make a unique ID to each film
    echo "<form role='form' id='$film'>
                              <img src='images/" . $nfila->image . "'><br /> 
                              <h4>" . $nfila->title . " (" . $nfila->year . ") 
                              <button type='button' class='btn btn-default' data-toggle='modal' data-target='.customModalClass" . $cont3 . "'>More Info</button></h4><br />

                            <div class='modal fade bs-example-modal-lg .customModalClass" . $cont3 . "' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel'>
                            <div class='modal-dialog modal-lg'>
                            <div class='modal-content'>
                            <div class='modal-header'>
                            <button tyle='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
                            <h4 class='modal-tigle'>" . $nfila->title . "</h4>
                            </div>
                            <div class='modal-body'>
                            <img src='images/" . $nfila->image . "'><br />
                            <p><strong>Original Title: </strong>" . $nfila->tituloOriginal . "</p>
                            <p><strong>Year: </strong>" . $nfila->anio . "</p>
                            <p><strong>Country: </strong>" . $nfila->pais . "</p>
                            <p><strong>Sinopsis: </strong>" . $nfila->sinopsis . "</p>
                            </div>
                            <div class='modal-footer'>
                            <button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button>
                            </div>
                            </div>
                            </div>
                            </div>";
    echo "</form>";
    $cont3++;
}

    In above code we have assigned a customModalClass class to each modal with $cont3 counter at the end to make it unique.

    Login or Signup to reply.
  2. 0

    You have to pass unique class,

    Below is my code it will help you, 

    <?php
        $consult= "SELECT * FROM `films`";
        $result = $conexion -> query($consult); 

    if($result){
        $cont3=0; //ID of the film
        $i=0;
        while($nfila = $resultado -> fetch_object()){
            $film="film".$cont3; //To make a unique ID to each film
            $i++;
            echo "<form role='form' id='$film'>
                  <img src='images/".$nfila->image."'><br> 
                  <h4>".$nfila->title." (".$nfila->year.") 
                  <button type='button' class='btn btn-default' data-toggle='modal' data-target='.modal". $i."'>More Info</button></h4><br>

                <div class='modal fade bs-example-modal-lg modal". $i."' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel'>
                <div class='modal-dialog modal-lg'>
                <div class='modal-content'>
                <div class='modal-header'>
                <button tyle='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
                <h4 class='modal-tigle'>".$nfila->title."</h4>
                </div>
                <div class='modal-body'>
                <img src='images/".$nfila->image."'><br>
                <p><strong>Original Title: </strong>".$nfila->tituloOriginal."</p>
                <p><strong>Year: </strong>".$nfila->anio."</p>
                <p><strong>Country: </strong>".$nfila->pais."</p>
                <p><strong>Sinopsis: </strong>".$nfila->sinopsis."</p>
                </div>
                <div class='modal-footer'>
                <button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button>
                </div>
                </div>
                </div>
                </div>";

            echo "</form>";
            $cont3++;
        }
        }
         else{
             echo "There was a error to load the films";
        }
      ?>
    Login or Signup to reply.
  3. 0

    you have a wrong data-target:

    <button type='button' class='btn btn-default' data-toggle='modal'   data-target='.bs-example-modal-lg'>More Info</button>

    All of your modals have this class, so just do something like:

    <div class='modal fade bs-example-modal-lg' id='modal_$film' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel'>

    Once you have an id, change the buttons data-target:

    data-target='#modal_$film'

    Hope that helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search