Как загружать элементы HTML внутри модального dinamicamente?

Я осуществляю несколько модальных окон посредством Bootstrap. Одна для каждой различной вещи. Я сделал доказательство, чтобы загружать различные данные в том же модальном окне.

Я объясняю....

У меня есть одна, чтобы подбирать излюбленные пользователи, другая для пользователей последователи и другая для пользователей, за которыми я следую.

Я сделал доказательство для, когда я нажимаю на показанную кнопку, уже будьте для любого из этих данных, для которых я хочу, откройте меня сам модальный, но с различием, состоящим в том, что меня приносят данные, как кнопка, на которую я нажимаю, уже была излюбленной, последователями, и оставаясь. Все идет очень хорошо.

Я приношу эти данные из BD через ajax (Jquery) и PHP.

Какова проблема?

Заставлять элементы появляться различный HTML как соединение, на которое я нажимаю.

Пример:

когда я нажимаю на соединение Фавориты, мне хотелось бы, что меня вытекли textbox, но когда я нажимаю на соединение Последователи, я не хочу textbox. Зная, что эти данные (Последователи, Фавориты, Оставаясь) откроются сам модальный.

Может быть, смогите понимать меня.

$(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>
0
задан 11.04.2017, 16:02
3 ответа

$(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>
1
ответ дан 30.10.2019, 03:16
  • 1
    Извиняет друг. Уже примите твой ответ как указанная и я я функционирую. У меня есть problemita сейчас. В этой части $ (' #pocos') .html (' < h1> favoritos< / h1> ') я поместил textbox, который я хочу, но я не функционирует то, что я хочу сделать, что раньше, если оно я функционировало. Там у меня есть один автозавершать. Не я funciona.que я делаю? – luis 11.04.2017, 18:00
  • 2
    твой funció n он называется, когда ты загружаешь страницу, но тогда не existí в контроль, что ты должен делать, состоит в том, чтобы называть funció n, когда будут верить в контроль. костлявая под $('#pocos').html('<h1>favoritos</h1>') ты должен помещать твою функцию $('.otro_control').autocompletar(function(){ }); – Jorge Arturo Juarez 11.04.2017, 18:05
  • 3
    Большое спасибо!! Где помещать автозавершать я имею keyup. Но спасибо сейчас функционируй хорошо. – luis 11.04.2017, 18:13

здесь я оставляю тебе мой код функционируй чуда. скопируйте и прикрепите, что у меня есть это, пойди в .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>

сюда идет другой .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>
0
ответ дан 30.10.2019, 03:16
  • 1
    Ты мог бы доводить до сведения, что он делает каждую часть твоего кода? смотри CГіmo отвечать , чтобы видеть, как делать более дружеский ответ – gbianchi♦ 02.08.2017, 15:27

Не если я понял хорошо, но если ты хочешь добавить элементы HTML, ты можешь использовать append

Немного as¦-:

$("#id_del_elemento_al_que_se_agrega").append("Código html");
2
ответ дан 30.10.2019, 03:16

Теги

Похожие вопросы