php - example - ¿Cómo pasar $_GET variables de un enlace a un bootstrapmodal?

modal bootstrap jquery

Question

Fragmento de mi código HTML.

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-book-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>  

Los módulos que se abren cuando se hace clic en el enlace:

<!-- Modal -->
    <div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <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">Modal title</h4>
          </div>
          <div class="modal-body">
            <?php var_dump($_GET)?>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

¿Hay una manera adecuada de pasar mi identificación al modal?

Answer 1

La solución simple para pasar la id , buscar registros de la base de datos contra la id pasada y mostrar en modal es;

Solución simple

Botón de llamada modal

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" href="file.php?id=<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

HTML modal

Coloque el siguiente HTML modal fuera del while loop en la página donde se encuentra el botón de llamada anterior (preferiblemente en la parte inferior de la página)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          //Content Will show Here
        </div>
    </div>
</div>

Ahora file.php un archivo PHP y file.php nombre file.php

Este archivo se llama con el botón de llamada modal href="file.php?id=<?php echo $obj->id;?>"

<?php
//Include database connection here
$Id = $_GET["id"]; //escape the string if you like
// Run the Query
?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"><center>Heading</center></h4>
</div>
<div class="modal-body">
    //Show records fetched from database against $Id
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default">Submit</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Para eliminar los datos dentro del modal o, en otras palabras, para actualizar el modal cuando se abren los siguientes registros sin actualizar la página, use el siguiente script

Póngalo después de las bibliotecas jQuery y Bootstrap (recuerde que las bibliotecas jQuery y Bootstrap siempre son lo primero)

<script>
$( document ).ready(function() {
    $(''#editBox'').on(''hidden.bs.modal'', function () {
          $(this).removeData(''bs.modal'');
    });
});
</script>

Solución alternativa con el oyente de eventos modales Ajax y Bootstrap

En el botón de llamada modal, reemplace href="file.php?id=<?php echo $obj->id;?> Con el atributo de data-id="<?php echo $obj->id;?>" Así que pasamos el id de fila a modal usando el evento modal bootstrap

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

HTML modal

Coloque el siguiente HTML modal fuera del while loop en la página donde se encuentra el botón de llamada anterior (preferiblemente en la parte inferior de la página)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><center>Heading</center></h4>
            </div>
            <div class="modal-body">
                <div class="form-data"></div> //Here Will show the Data
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Ahora agregue el siguiente script en la misma página;

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() {       
    $(''#myModal'').on(''show.bs.modal'', function (e) { //Modal Event
        var id = $(e.relatedTarget).data(''id''); //Fetch id from modal trigger button
    $.ajax({
      type : ''post'',
       url : ''file.php'', //Here you will fetch records 
      data :  ''post_id=''+ id, //Pass $id
      success : function(data){
         $(''.form-data'').html(data);//Show fetched data from database
       }
    });
    });
});
</script>

Ahora file.php un archivo PHP y file.php nombre file.php (igual que se usa en el método Ajax)

<?php
//Include database connection here
if($_POST[''id'']) {
    $id = $_POST[''id''];
    // Run the Query
    // Fetch Records
    // Echo the data you want to show in modal
 }
?>

En esta solución, no necesita el siguiente script para eliminar los datos dentro del modal o, en otras palabras, para actualizar el modal

$(''#editBox'').on(''hidden.bs.modal'', function () {
      $(this).removeData(''bs.modal'');
});

Solución alternativa con la función Ajax y jQuery Click

Botón de llamada modal

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" class="open-modal" href="" id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

Ponga el siguiente HTML modal en la página donde se encuentra el botón de llamada modal anterior (preferiblemente en la parte inferior de la página)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <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">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="form-data"></div> //Here Will show the Data
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

siguiendo el código del método Ajax en la misma página donde se encuentra el botón Modal HTML & Modal call.

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() { 
  $(''.open-modal'').click(function(){
    var id = $(this).attr(''id'');
    $.ajax({
      type : ''post'',
       url : ''file.php'', //Here you should run query to fetch records
      data : ''post_id=''+ id, //Here pass id via 
      success : function(data){
          $(''#editBox'').show(''show''); //Show Modal
          $(''.form-data'').html(data); //Show Data
       }
    });
  });
});
</script>

Y el archivo PHP file.php será el mismo que la solución anterior con el evento modal bootstrap

Pase la información de la página a Modal

En algunos casos, solo es necesario pasar (mostrar) información mínima al modal que ya está disponible en la página, se puede hacer solo con el evento modal bootstrap sin el Ajax Method con data-attributes

<td>
  <span data-placement="top" data-toggle="tooltip" title="Show">
    <a data-book-id="<?php echo $obj->id;?>" data-name="<?php echo $obj->name;?>" data-email="<?php echo $obj->email;?>" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox">
    <span class="glyphicon glyphicon-pencil"></span>
    </a>
  </span>
</td>

Evento modal

$(document).ready(function(){
    $(''#editBox'').on(''show.bs.modal'', function (e) {
        var bookid = $(e.relatedTarget).data(''book-id'');
        var name = $(e.relatedTarget).data(''name'');
        var email = $(e.relatedTarget).data(''email'');
        //Can pass as many onpage values or information to modal  
     });
});