Carga dinámicamente información a Twitter Bootstrap modal

Problema:

Me gustaría transferir usando jQuery un valor en un atributo de enlace a una consulta PHP/SQL.

Código HTML:

<a data-toggle="modal" href="#myModal" id="1"><i class="pull-right icon-eye-open"></i>HTML</a>

Código PHP:

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
      <button class="close" data-dismiss="modal">&times;</button>
      <h3>Title</h3>
    </div>
    <div class="modal-body">            
        <?php
            $query = "SELECT * FROM table WHERE id = ID FROM JQUERY HERE";
            $result = mysql_query($query) or die ('Error (' . mysql_errno() . ') ' . mysql_error());
        ?>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-info" data-dismiss="modal" >Close</a>
    </div>
</div>

Escenario:

Cuando el usuario hace clic en el elemento de enlace que tiene data-toggle="modal", entonces jQuery debe tomar el valor del atributo id (que es 1 en este caso) y enviarlo a la consulta SQL para que la consulta SQL parece:

$query = "SELECT * FROM table WHERE id = 1";

código jQuery:

$("a[data-toggle=modal]").click(function(){
    var essay_id = $(this).attr('id');
    //Find $essay set it to essay_id in PHP
    //Alternatively create a $_SESSION['EID'] here
});

Pregunta:

¿Cómo uso jQuery para establecer una variable ($ ensayo) en PHP? o ¿cómo puedo crear una variable de sesión en PHP a través de jQuery?

preguntado el 12 de junio de 12 a las 20:06

Supongo que no has probado nada porque en realidad no hay dudas :) -

He agregado un código jQuery y una pregunta. -

3 Respuestas

aquí está la solución, 

<a href="#" id="1" class="push">click</a>

usa un div en tu cuerpo modal, como este 

    <div class="modal-body">  

             <div class="something" style="display:none;">
                    // here you can show your output dynamically 
             </div>
    </div>

ahora poner datos en el .something con ajax llamando. por favor verifique http://api.jquery.com/jQuery.ajax/ para saber más sobre jquery ajax. 

   $(function(){

   $('.push').click(function(){
      var essay_id = $(this).attr('id');

       $.ajax({
          type : 'post',
           url : 'your_url.php', // in here you should put your query 
          data :  'post_id='+ essay_id, // here you pass your id via ajax .
                     // in php you should use $_POST['post_id'] to get this value 
       success : function(r)
           {
              // now you can show output in your modal 
              $('#mymodal').show();  // put your modal id 
             $('.something').show().html(r);
           }
    });


});

   });

contestado el 24 de mayo de 13 a las 20:05

¿Cómo detecta AJAX que debe obtener la ID de un [data-toggle=modal]? ¿No debería haber también una función click()? - kexxcream

sí, puedes usar click() . Acabo de darte una idea de cómo hacer esto. - Tareq Jobayere

Corrija esta línea por favor datos: 'post_id='+eassay_id La variable correcta es "essay_id". ¡Stackoverflow no me permite cambiar solo un carácter! @TareqJobayere - George D.

Solución final

Código HTML:

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
      <button class="close" data-dismiss="modal">&times;</button>
      <h3>Title</h3>
    </div>
    <div class="modal-body">            
        <div id="modalContent" style="display:none;">

        </div>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-info" data-dismiss="modal" >Close</a>
    </div>
</div>

código jQuery:

$("a[data-toggle=modal]").click(function() 
{   
    var essay_id = $(this).attr('id');

    $.ajax({
        cache: false,
        type: 'POST',
        url: 'backend.php',
        data: 'EID='+essay_id,
        success: function(data) 
        {
            $('#myModal').show();
            $('#modalContent').show().html(data);
        }
    });
});

Respondido el 12 de junio de 12 a las 21:06

el .show() parece haber sido cambiado en la implementación actual.... $('div#myModal').modal('show') - Richard

¿Por qué es necesario el 'caché: falso'? - miguel stevens

  1. Obtener ID con jQuery
  2. Pásalo a algún script a través de AJAX
  3. Recupera tus resultados y haz con ellos lo que te plazca

http://api.jquery.com/jQuery.ajax/

Respondido el 12 de junio de 12 a las 20:06

La consulta SQL está en la misma página y no se recarga. Quiero cambiar dinámicamente el contenido de cambiando el ID el usuario presiona. Ver explicación actualizada y código jQuery. - kexxcream

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.