Question

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)

});
});

Comments

¿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?

---

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...

---

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.

Answer 1

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>