부트 스트랩 모달에서 ajax 호출 결과 표시

Question

부트 스트랩 모달에 여러 데이터를 표시해야합니다.

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> 

이를 위해 내가 한 일은이 있었다. 모달은 나타나지 않지만 이것을 검사 할 때 오류가 나타나지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

편집

나는 점을 놓친 실현 답변을 감안할 때, 그래서 성공 기능이 같아야합니다

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

여러분도 알다시피 modal-body 안에 많은 "< p>"태그가 있습니다. 나는 그것을 구분할 수 있도록 이드를 삽입하려고 시도했지만 그것은 나를 위해 작동하지 않는다. 어떻게해야합니까?

Answer 1

이 (나를 위해 일을) 시도 :

이

(당신이 show.bs.를 사용할 수 있습니다

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

그런 다음이 모달 쇼 이벤트를 바인딩 :이 모달 표시됩니다

모달 또는 shown.bs.modal 유일한 차이점은 이벤트 출시시기입니다.

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

Answer 2

모달이 표시되고 모달을 표시하지 않을 때 클릭 이벤트를 바인딩하므로 클릭 핸들러가 절대 바인딩되지 않습니다.

당신은 같은 것을 할 수 있습니다 : 당신이 모달이 표시됩니다 때 클릭 처리기를 추가 할 경우

$('.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"); 
     } 
    }); 
}); 

, 당신은 적절한 핸들러를 사용해야합니다. You can find them here (아래 이벤트). 당신은 당신이 이전에 점을 삽입하면 'p'을라는 클래스를 찾고 있기 때문에

Answer 3

당신은

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

으로

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

를 교체해야합니다. html 태그 <p></p>의 경우 선택자에 'p'이라고 써야합니다.

모달을 표시하려면 "$('#seeProfile').modal('show');"을 입력하십시오.내가 제거

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

참고 :

Answer 4

이보십시오. 네가 전에 가지고 있었던 (점).

Answer 5

클래스 이름을 사용하여 시도했습니다.

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