Modal with Bootstrap calls link in PHP from MySQL

3

Good morning, I wanted to consult the following:

When generating a modal with Bootstrap and calling from the database, it generates the modal , but even though there is a lot of data, it always shows me the first one it takes.

Next code in PHP :

$consulta = mysql_query("SELECT 'video','info' FROM 'tutorial' group by 'video','info' ", $link);

<button type=button  class=btn btn-info btn-lg data-toggle=modal data-target=#myModal>Open Modal</button>
                            <div id=myModal class=modal fade role=dialog>
                                <div class=modal-dialog>
                                    <div class=modal-content>
                                        <div class=modal-header>
                            <button type=button class=close data-dismiss=modal>&times;</button>
                                <h4 class=modal-title>Modal Header</h4>
                            </div>
                            <div class=modal-body>
                                <p><a href=' . $row[1] . '>$row[1]</a></p>      
                            </div>
                            <div class=modal-footer>
                                <button type=button class=btn btn-default data-dismiss=modal>Close</button>
                                </div>
                                </div>

                              </div>
                            </div>";    

EDITED: I enclose the complete code: What I intend is that for each data in the base, a button will appear that will open a modal and that will be the address of the video of that data.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hola!</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/business-frontpage.css" rel="stylesheet">
</head>
<body>
        <div class="row">
             <div class="col-sm-8">
                <?php
                include("conexion.php");
                $link = Conectarse();

                $consulta = mysql_query("SELECT 'video'FROM 'tutorial' group by  'video'", $link);
                echo '<table background="id="grid-selection" class="table table-condensed table-hover table-striped">';
                // Establish the output variable
                echo ' <thead><tr class=info>';
                echo '<th data-column-id="video" style=text-align:center>Video</th>';

                while ($row = mysql_fetch_row($consulta)) {
                    echo "<tr>";  
                    if($row[0]<> NULL){
                        echo"<td>";
                        echo"<button type=button  class=btn btn-info btn-lg data-toggle=modal data-target=#myModal>Open Modal</button>
                            <div id=myModal class=modal fade role=dialog>
                                <div class=modal-dialog>
                                    <div class=modal-content>
                                        <div class=modal-header>
                            <button type=button class=close data-dismiss=modal>&times;</button>
                                <h4 class=modal-title>Modal Header</h4>
                            </div>
                            <div class=modal-body>
                                    <p><a href=' . $row[0] . '>$row[0]</a></p>      
                                    <div class=modal-footer>
                                <button type=button class=btn btn-default data-dismiss=modal>Close</button>
                                </div>
                                </div>

                              </div>
                            </div>";
                        echo"</td>";
                            }else{
                        echo "<td style=text-align:center>$row[0]</td>";
                    }
                }  
                echo "</thead>";
                echo "</table>";?>

        </div>
        <hr>
        <hr>
    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
    
asked by DesAlocar 07.01.2016 в 04:07
source

2 answers

1

I do that by means of Id's, for example:

EDITED

    

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hola!</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/business-frontpage.css" rel="stylesheet">
</head>
<body>
        <div class="row">
             <div class="col-sm-8">
                <?php
                include("conexion.php");
                $link = Conectarse();

                $consulta = mysql_query("SELECT 'video'FROM 'tutorial' group by  'video'", $link);
                echo '<table background="id="grid-selection" class="table table-condensed table-hover table-striped">';
                // Establish the output variable
                echo ' <thead><tr class=info>';
                echo '<th data-column-id="video" style=text-align:center>Video</th>';
                $contador = 1;
                while ($row = mysql_fetch_row($consulta)) {
                    echo "<tr>";  
                    if($row[0]<> NULL){
                        echo"<td>";
                        echo"<button type=button  class=btn btn-info btn-lg data-toggle=modal data-target=#myModal".$contador.">Open Modal</button>
                            <div id=myModal".$contador." class=modal fade role=dialog>
                                <div class=modal-dialog>
                                    <div class=modal-content>
                                        <div class=modal-header>
                            <button type=button class=close data-dismiss=modal>&times;</button>
                                <h4 class=modal-title>Modal Header</h4>
                            </div>
                            <div class=modal-body>
                                    <p><a href=' . $row[0] . '>$row[0]</a></p>      
                                    <div class=modal-footer>
                                <button type=button class=btn btn-default data-dismiss=modal>Close</button>
                                </div>
                                </div>

                              </div>
                            </div>";
                        echo"</td>";
                        $contador++;
                            }else{
                        echo "<td style=text-align:center>$row[0]</td>";
                    }
                }  
                echo "</thead>";
                echo "</table>";?>

        </div>
        <hr>
        <hr>
    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

A counter was added (I do not see in your select a id " ALWAYS IN A TABLE THE FIRST COLUMN MUST BE AN IDENTIFIER "), that counter goes in the id of the button and the modal and before the while does its iteration we increase the counter +1.

    
answered by 07.01.2016 / 16:37
source
0

Your question is unclear, I am going to assume that the problem is that not all the data returned by the query is shown. I'm also going to assume that the data that comes from the query is in row.

<button type=button  class=btn btn-info btn-lg data-toggle=modal data-target=#myModal>Open Modal</button>
                        <div id=myModal class=modal fade role=dialog>
                            <div class=modal-dialog>
                                <div class=modal-content>
                                    <div class=modal-header>
                        <button type=button class=close data-dismiss=modal>&times;</button>
                            <h4 class=modal-title>Modal Header</h4>
                        </div>
                        <div class=modal-body>
                            <p>
                             <?php foreach($consulta => $row){ ?>
                                  <a href=' . $row[1] . '>$row[1]</a>
                             <?php } ?>
                            </p>      
                        </div>
                        <div class=modal-footer>
                            <button type=button class=btn btn-default data-dismiss=modal>Close</button>
                            </div>
                            </div>

                          </div>
                        </div>
    
answered by 07.01.2016 в 13:49