how to call modal window with jquery in PHP?

0

I have the following code in PHP and I am making a table where it shows the records of my database, I have a button to edit and another to delete but when I call the modal window to delete the record it does not show anything, it does not even come out some error message, it does not show me the modal window that should show where it asks if I want to delete the record, I do not know what's wrong.

<?php

require 'conexion.php';

$where ="";

$SQL = "SELECT * FROM personas";
$Resul = $mysqli->query($SQL);

?>

<html lang="es">

<head>


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
<script type="text/javascript" scr="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" scr="js/jquery-3.2.1.js"></script>
<script type="text/javascript" scr="js/bootstrap.min.js"></script>

</head>

<body>

    <div class="container">
        <div class="row">
            <h2 style="text-align:center">Curso de PHP</h2>

        </div>

        <div class="row">
            <a href="nuevo.php" class="btn btn-primary">Nuevo Registro</a>
        </div>
   <br>
   <!-- Creamos una tabla responsiva -->
   <div class="row table-responsive">
<table class="table table-striped">
    <thead> <!-- Encabezado de la tabla -->
        <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Email</th>
            <th>Telefono</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
   <tbody> 
        <?php while($row = $Resul->fetch_array(MYSQLI_ASSOC)) { ?>
        <tr>

            <td> <?php echo $row['id']; ?></td>
            <td> <?php echo $row['nombre']; ?></td>
            <td> <?php echo $row['correo']; ?></td>
            <td> <?php echo $row['telefono']; ?></td>
            <td> <a href="modificar.php?id=<?php echo $row['id']; ?>"><span 
    class="glyphicon glyphicon-pencil"></span></a> </td>
            <td><a href="#" data-href="eliminar.php?id=<?php echo 
    $row['id']; ?>" data-toggle="modal" data-target="#confirm-delete"><span 
   class="glyphicon glyphicon-trash"></span></a></td></tr>
        <?php } ?>
    </tbody> 
  </table>
  </div>

 </div>

            <!-- Modal -->
    <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" 
   aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Eliminar 
  Registro</h4>
                </div>

                <div class="modal-body">
                    ¿Desea eliminar este registro?
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-
      dismiss="modal">Cancel</button>
                    <a class="btn btn-danger btn-ok">Delete</a>
                </div>
            </div>
        </div>
    </div>

    <!--Scrip en Jquery-->
    <script>
        $('#confirm-delete').on('show.bs.modal', function(e) {
            $(this).find('.btn-ok').attr('href', 
    $(e.relatedTarget).data('href'));

            $('.debug-url').html('Delete URL: <strong>' + 
    $(this).find('.btn-ok').attr('href') + '</strong>');
        });
    </script>   

    
asked by CeciliaMa 03.01.2018 в 19:08
source

2 answers

0

If you have to call a modal from PHP, something has not done well in your approach. But you can. The idea is to generate the javascript or jQuery code that would call the modal window in a PHP variable previously defined as empty, then inside the body, if the variable contains code, the pints would be something like this:

<?php

    $modal = "";

    if($algo) {
        $modal = "$('#modal').show();";
    }

?>

<body>
    <script>
        <?php
            if(!empty($modal)) {
                echo $modal;
            }
        ?>
    </script>
</body>

As PHP is executed before delivering to the client, the final code will remain with the show of the modal if $ something is fulfilled.

    
answered by 04.01.2018 в 09:58
0

Thanks, the inconvenience I had was because I was using a different version of Jquery, I downloaded the example project I was using and I'm working with the version of Jquery that is included and the modal already works, Thanks

    
answered by 04.01.2018 в 22:13