entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

¿Como cargar elementos HTML dentro de un modal dinamicamente?

Estoy implementando varias ventanas modales mediante Bootstrap. Una para cada cosa diferente.He hecho la prueba para cargar diferentes datos en una misma ventana modal.

Explico....

Tengo una para recoger usuarios favoritos,otra para usuarios seguidores y otra para usuarios a los que sigo.

He hecho la prueba para cuando presiono el botón indicado ya sea para cualquiera de esos datos que quiero,me abran el mismo modal,pero con la diferencia de que me traen datos según el botón que presiono,ya sea favoritos,seguidores y siguiendo.Todo marcha muy bien.

Esos datos los traigo de la BD a través de ajax(Jquery) y PHP.

¿Cual es el problema?

Hacer aparecer elementos HTML diferente según el link en el que hago clic.

Ejemplo:

cuando hago clic en el link Favoritos me gustaría que me saliera un textbox,pero cuando hago clic en el link Seguidores no quiero el textbox. Sabiendo que estos datos(Seguidores,Favoritos,Siguiendo)se abrirán el mismo modal.

Quizás me puedan entender.


**### Link 1**

<a href="#" data-toggle="modal" data-target="#multi_opt_user" data-whatever="Personas que me siguen." class="add_more" id="add_more_to">Seguidores</a>

### **Link 2
**

<a href="#" data-toggle="modal" data-target="#multi_opt_user" data-whatever="Mis favoritos." id="makeagifttosomeone">
    <i class="fa fa-gift" aria-hidden="true"></i><br>
    <span class="sp_style">Favoritos</span>
  </a>

  <div class="modal fade" id="multi_opt_user" role="dialog">
    <div class="modal-dialog">

      <div class="modal-content">
         <div class="modal-header">
         <i class="fi-heart"></i>
             <button id="pethatlimypro" type="button" class="close" data-dismiss="modal">×</button>
                 <h4 class="modal-title"></h4>
                        <div class="modal-body">
                           <div id="pocos"></div>
                                  </div>

                                    <div class="modal-footer">
                                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                          </div>
                                              </div>
                                                  </div>
                                                       </div>

### Codigo JQuery

$(document).ready(function(){
$('#multi_opt_user').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var recipient = button.data('whatever')
  var modal = $(this)
  modal.find('.modal-title').text(recipient)

});
});

1voto

carlossevi comentado

¿Y esos elementos diferentes los incluyes en la respuesta AJAX o tienen que estar pre-cargados? Si son muy diferentes ¿Por qué no tener dos modales?

0voto

Leonardo-Tadei comentado

Donde están tus llamdas AJAX para cargar el modal?

No entiendo si tu problema es que no podés mapear cada botón a una llada AJAX diferente o si tu problema es que la respuesta de la llamda AJAX no contiene lo que te hace falta...

0voto

luis2016 comentado

No quiero tener mas modales,porque ya tengo varios y no le veo nada lindo eso de tener todo ese codigo HTML sabiendo que se puede reutilizar un solo modal.Mientras menos mejor.

1 Respuesta

2votos

luis2016 Puntos1930

Lo he hecho de esta manera,aunque parece que repito códigos,no lo he hecho.Todo me funciona como quiero.

   <a href="#" data-toggle="modal" data-target="#multi_opt_user" data- 
  whatever="Personas que me siguen." class="add_more" 
   id="add_more_to">Seguidores</a>

   <a href="#" data-toggle="modal" data-target="#multi_opt_user" data- whatever="Mis favoritos." id="makeagifttosomeone">
   <i class="fa fa-gift" aria-hidden="true"></i><br>
    <span class="sp_style">Favoritos</span>
   </a>

  <div class="modal fade" id="multi_opt_user" role="dialog">
  <div class="modal-dialog">

  <div class="modal-content">
     <div class="modal-header">
     <i class="fi-heart"></i>
         <button id="pethatlimypro" type="button" class="close" data-dismiss="modal">×</button>
             <h4 class="modal-title"></h4>
                    <div class="modal-body">
                       <div id="pocos"></div>
                              </div>

                                <div class="modal-footer">
                                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                      </div>
                                          </div>
                                              </div>
                                                   </div>`

JQuery(AJAX)

<script type="text/javascript">
  $(document).ready(function(){
$('#makeagifttosomeone').click(function(){
         $('#pocoss').html('<input id="intsrchshtcts" placeholder="busca a alguien a quien donar." type="search" name="#">')

  $('#intsrchshtcts').keyup(function(){

       var query = $(this).val();
          if(query != '')
              {
                $.ajax({

                     url:"allusersforgiving.php",
                       method:"POST",
                         data:{query:query},
                            success:function(data)

                                   {
                                    $('#pocos').fadeIn();
                                        $('#pocos').html(data);
                                                }
                                                  });
                                                      }

                  else{

                     var currentuser = '<?php echo $currentuserid = $my_id = $fila['Id']; ?>';
                       var currentuserid = 'currentuser='+ currentuser ;

                      $.ajax({

                        url:"allusersforgiving.php",
                        method:"POST",
                        data:{query:query},
                            success:function(data)

                                   {
                                    $('#pocos').fadeIn();
                                        $('#pocos').html(data);
                                                }
                                                  });
}

                                                        });

                        $(document).on('click', '#nameList ul li', function(){
                             $('#intsrchshtcts').val($(this).text());
                                 $('#pocos').fadeOut(); 
                                        });

});

$('#add_more_to').click(function(){
         $('#pocoss').html('<input id="intsrchshtcts" type="search" name="#">')

          $('#intsrchshtcts').keyup(function(){

       var query = $(this).val();
          if(query != '')
              {
                $.ajax({

                     url:"srchinusers.php",
                       method:"POST",
                         data:{query:query},
                            success:function(data)

                                   {
                                    $('#pocos').fadeIn();
                                        $('#pocos').html(data);
                                                }
                                                  });
                                                      }

                  else{

                     var currentuser = '<?php echo $currentuserid = $my_id = $fila['Id']; ?>';
                       var currentuserid = 'currentuser='+ currentuser ;

                      $.ajax({

                        url:"getlistsofuserstoshortcuts.php",
                        method:"POST",
                        data:currentuserid,
                            success:function(data)

                                   {
                                    $('#pocos').fadeIn();
                                        $('#pocos').html(data);
                                                }
                                                  });
}

                                                        });

                        $(document).on('click', '#nameList ul li', function(){
                             $('#intsrchshtcts').val($(this).text());
                                 $('#pocos').fadeOut(); 
                                        });
});

$('#multi_opt_user').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text(recipient)

});

});

</script>

1voto

Leonardo-Tadei comentado

Gracias por compartir la respuesta!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta