Отображение результата вызова ajax в модальном режиме начальной загрузки

Мне нужно показать несколько данных в модальном Bootstrap. Для этого я сделал следующее:

JS-файл:

$('#seeProfile').on('show', function() {

  $('.see-user').on('click', function(e) {
  e.preventDefault();

  var id = $(this).data('id');

  $.ajax({
     url:  'getUser',
     type: 'POST',
     data: {id: id},
     success: function(html){
       $('#seeProfile .modal-body .p').html('test');
     },
     error: function(){
       alert("error");
     }  
  });  
});
});

фрагмент просмотра (модальный):

<div id="seeProfile" class="modal hide fade" tabindex="-1" data-replace="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h3>Perfil de Usuario</h3>
</div>

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

This is not working. Modal is not showing up, but when inspecting this no errors appear. What am I doing wrong?

ИЗМЕНИТЬ

Учитывая ответы, я понял, что пропустил точку, поэтому функция успеха должна быть такой:

$('#seeProfile .modal-body p').html("test");

Теперь, когда модальный режим работает, мне нужно знать, как «вставить» данные в эту новую модальную организацию:

<div id="seeProfile" class="modal hide fade" tabindex="-1" data-replace="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h3>Perfil de Usuario</h3>
</div>
<div class="modal-body">
    <div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible="1">
        <div class="row-fluid">
            <div class="span6">
                <h5>Usuario</h5>
                <p><input type="text" class="span12 m-wrap" id="username" readonly></p>
                <h5>Nombre</h5>
                <p><input type="text" id="name" class="span12 m-wrap" value="" readonly></p>
            </div>
            <div class="span6">
                <h5>Email</h5>
                <p><input type="text" class="span12 m-wrap" readonly></p>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn">Close</button>
</div>

as you can see there are many "< p >" tags inside modal-body. I have tried inserting an id to it so it can be distinct but it's not working for me. How can I do this?


javascript jquery ajax twitter-bootstrap bootstrap-modal
person Limon    schedule 18.06.2014    source источник

Ответы (5)


arrow_upward
5
arrow_downward

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

Вы можете сделать что-то вроде этого:

$('.see-user').on('click', function(e) {
    e.preventDefault();
    var id = $(this).data('id');
    $.ajax({
        url:  'getUser',
        type: 'POST',
        data: {id: id},
        success: function(html){
            $('#seeProfile .modal-body p').html('test');
            $('#seeProfile').modal('show');
        },
        error: function(){
            alert("error");
        }  
    });  
});

Если вы хотите добавить обработчик кликов при отображении модального окна, вам нужно использовать соответствующие обработчики. Вы можете найти их здесь (ниже "События").

person A1rPun    schedule 18.06.2014

arrow_upward
1
arrow_downward

Вы должны заменить

 $('#seeProfile .modal-body .p').html('test');

By

 $('#seeProfile .modal-body p').html('test');

Потому что вы ищете класс с именем 'p', если вы вставите точку раньше. Для HTML-тега <p></p> вам просто нужно написать «p» в селекторе.

И в комплекте с "$('#seeProfile').modal('show');", чтобы показать модальный.

person BENARD Patrick    schedule 18.06.2014

arrow_upward
0
arrow_downward

Попробуйте это (работайте для меня):

Это покажет модальное:

        $('Your button').on('click',function(e){
            e.preventDefault();
            $('your modal').modal('show');
        });

Затем это свяжет модальное событие show:

(вы можете использовать show.bs.modal или visible.bs.modal, разница только во времени запуска события)

      $('your modal').on('show.bs.modal', function(e) {
          e.preventDefault();
          //ajax call here!!
      });
person Vanojx1    schedule 18.06.2014

arrow_upward
0
arrow_downward

Попробуй это:

$('#seeProfile .modal-body p').html('test');

Обратите внимание, что я удалил . (точка) у вас было до стр.

person Vladd    schedule 18.06.2014

arrow_upward
0
arrow_downward

Пробовал использовать имя класса.

$(document).on("click", ".getAndUploadButClass", function() {
    alert("Before laoding the image making ajax call to load the images ");
    $('#picturemyModal').modal('show');
});
person Yogeshwar    schedule 28.06.2016