| 제목 | ajax에서 bootstrap modal 호출. | ||
|---|---|---|---|
| 글쓴이 | 리퍼스 | 작성시각 | 2015/06/20 09:30:19 |
|
|
|||
|
안녕하십니까. 무한 구글링에 실패하여 여기를 찾게 되었습니다. 의외로 간단할것 같았는데 결과물이 안나오니 갑갑하네요. 제목 그래로 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 코드를 볼수 있을것 같은데... 구글링하면 금방 찾을줄 알았는데 의외로 같은 고통을 격는 분들이 없더군요...ㅠㅜ 혹시 알고 계시면 답변 부탁드립니다. 감사합니다. 즐거운 주말 보내세요!! |
|||
| 다음글 | 함수나 메소드 인자로 클래스를 넘겨줄수가 있나요...? (2) | ||
| 이전글 | CI문제인지 PHP문법 문제인지 모르겠는데.. 삼항연산... (3) | ||
|
일용직노동자
/
2015/06/20 10:11:19 /
추천
0
|
|
리퍼스
/
2015/06/20 12:20:08 /
추천
0
일용직노동자님 답변감사합니다.
위에서 알려주신대로 html()로 값을 넣고 호출하였으나 팝업의 뒷 배경만 검게변하고 태그 화면은 보이질 않네요. 변경된 html이 modal이 뜨기전에 전달되지 않는 느낌 입니다. 요소로 보면 변경된 코드가 보이지만, 소스보기로 보면 변경된 코드가 보이질 않습니다..... 이것도 전 잘 이해가 안가요... 요소보기로 코드가 보이는데 화면엔 안보이다니.... 미궁으로 빠지 나요.. 혹시 view - ajax - view(modal) 순서로 출력되는 간단한 소스가 있다면 공유부탁드립니다. |
|
부우
/
2015/06/24 21:15:09 /
추천
0
$("#viewModal").html 을 사용했는데.. ajax에서 넘어오는 div의 id가 viewModal이네요..
아마 페이지에서 viewModal 자체가 빠진 것 같습니다. <div id='viewModal' class='modal fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'> 부분을 문서에 남기고 나머지 modal-dialog 부분만 ajax로 로딩하면 될 것 같네요. bootstrap 사이트에서 가능하면 remote보다 jquery.load 나 직접 작성해서 사용을 권장한다네요. 아래 modal 예제 있으니 참고해보세요. http://jschr.github.io/bootstrap-modal/ |
어렵게 생각하지 마시고 부트스트랩 모달의 기본 기능을 사용하세요
$('.modal').modal({remote : 'modal.html'});
이런식으로 주고 변경되는 값을 jquery로 modal.html 값에 넣어주고 html()이든 append() 함수든 이용해서 말이죠
그리고나서 $('.modal').modal({remote : 'modal.html'}); 이런식으로 호출하면 될것입니다.