ajax에서 bootstrap modal 호출.
안녕하십니까.
무한 구글링에 실패하여 여기를 찾게 되었습니다.
의외로 간단할것 같았는데 결과물이 안나오니 갑갑하네요.
제목 그래로 ajax를 통해서 html을 받아와 특정위치의 ID값에 대처하여 출력을 하는데요. 이 바뀌는 위치가 Bootstrap의 Modal기능으로 호출되는 부분입니다. 근데 ajax에서 직접 호출을 하는데 뒷 배경이 검게 변하는것 까지는 되는데 앞에 아무것도 안뜨네요.. 다시말해 Modal로 띄울 화면에 태그들을 아무것도 없는것 같은데. ajax에서 위치를 바꾸기 전에 뿌려지는 문제가 있는건지.. 먼가 리플래쉬하는 방법을 써야하는건지 모르겠네요..
일단 호출되는 부분과 몇몇 코드를 올려드립니다.
Ajax 호출부분
==============================================
$.ajax({
type : 'POST',
url : "/freeViewBoard",
data : {
boardcode : boardcode
},
cache : false,
async : false
}).done(function(html) {
$("#viewModal").html(html);
$('#viewModal').modal('toggle');
==============================================
여기서 html에 내용은 ID viewModal를 갖는 HTML 코드들입니다. alert로 넘어오는것 확인까지 했구요.
modal 옵션은 toggle와 show등등 옵션을 다 바꿔가며 테스트 해봤는데도 안뜹니다.(뒷 배경만 검게되는것까지만..)
!! 위에서 html를 바꾸지 않고 그부분을 삭제 하고 바로 modal을 띄우면 기존 위치에 있는 화면을 정상적으로 잘뜨네요. 바꾸기만 하면 안뜨는군요..
다음은 기존의 viewModal과 바뀐 viewModal 입니다. 혹시 제가 문법을 잘못 알고 있나하여 둘다 올립니다.
기존 잘뜨는 HTML viewModal
<div id="viewModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">글쓴이</h4>
</div>
<div class="modal-body">
<h4>제목</h4>
<div>
<p>내용</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
닫기
</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
새로 바뀌는 실패한 HTML(ajax에서 넘어온.)
<div id='viewModal' class='modal fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<h4 class='modal-title'>이순신 님의 글입니다</h4>
</div>
<div class='modal-body'>
<h4>테스트</h4>
<div>
<p>테스트001</p>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>닫기 </button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
=================================
이렇게 됩니다.. 제 생각에는 바꿔준후 먼가 갱신을 해줘야 Modal에서 그 바뀐 Html 코드를 볼수 있을것 같은데... 구글링하면 금방 찾을줄 알았는데 의외로 같은 고통을 격는 분들이 없더군요...ㅠㅜ
혹시 알고 계시면 답변 부탁드립니다.
감사합니다. 즐거운 주말 보내세요!!
어렵게 생각하지 마시고 부트스트랩 모달의 기본 기능을 사용하세요
$('.modal').modal({remote : 'modal.html'});
이런식으로 주고 변경되는 값을 jquery로 modal.html 값에 넣어주고 html()이든 append() 함수든 이용해서 말이죠
그리고나서 $('.modal').modal({remote : 'modal.html'}); 이런식으로 호출하면 될것입니다.