How to load HTML elements dynamically within a modal?

Navigation
0

I am implementing several modal windows through Bootstrap. One for each different thing. I have done the test to load different data in the same modal window.

I explain ...

I have one to pick up favorite users, another for followers and another for users I follow.

I have done the test for when I press the indicated button for any of the data I want, I open the same modal, but with the difference that they bring me data according to the button I press, be it favorites, followers and Following. Everything is going very well.

These data I bring from the BD through ajax (Jquery) and PHP.

What is the problem?

Make different HTML elements appear according to the link that I click on.

Example:

When I click on the Favorites link I would like a textbox to come out, but when I click on the Followers link I do not want the textbox. Knowing that this data (Followers, Favorites, Following) will open the same modal.

Maybe they can understand me. 

$(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)

});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>




<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>
    
asked by luis 12.04.2017 в 01:02
source

3 answers

1

$(document).ready(function(){

$('#seguidores').click(function(){
         $('#pocos').html('<h1>seguidores</h1>')
});

$('#favoritos').click(function(){
         $('#pocos').html('<h1>favoritos</h1>')
});

$('#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)
  

});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>




<a href="#" id="seguidores" 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" id="favoritos" 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>
    
answered by 12.04.2017 / 01:30
source
2

I do not know if I understood correctly, but if you want to add HTML elements you can use append

Something like this: 

$("#id_del_elemento_al_que_se_agrega").append("Código html");
    
answered by 12.04.2017 в 01:07
0

Here I leave you my code works great. copy and paste what I have this goes in a .php 

 <td><center><span data-toggle='tooltip' title='Ver XML STEP'><a  data-toggle='modal' data-target='#Modificar' href='XmlCpg.php?id=$row[lst_IdIntegracion]&cod=$row[codart]'><span style='color:red' class='fa fa-eye'></span></a></span></center></td>
                               </tr>

                    </table> 
                </div>
            </div>
        </div>



        <div class="modal fade " id="Modificar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content ">

                </div>
            </div>
        </div>

here goes the other .php 

<div class="modal-header">

    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"><center>titulo</center></h4>
</div>

<div class="modal-body ">

        <pre>aqui pones el codigo q quieras</pre>

</div>
<div class="modal-footer">

    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
    
answered by 03.08.2017 в 00:12
Error previous definition of 'class Player' in C ++ Alternating ngRepeat results in AngularJS