부트스트랩 모달창에 아이프레임으로 form 띄웠을때
본문
부득이하게 게시판같은 리스트 페이지에서(그누보드는 아닙니다요)
수정페이지를 부트스트랩 아이프레임 소스를 이용해 모달창으로 띄우긴했습니다.
근데 수정확인 submit을 누르면 게시글 수정이 안되네요..ㅠㅠ
별의 별 방법을 다 해봐도 안되고 그냥 아이프레임으로 띄우고 아이프레임 안에서 작동하게 하면 잘되거든요. 근데 그러자니 submit후에 팝업 꺼지고 새로고침 되고 하는거 하자니 또 복잡한거 같고해서
고수님들의 도움을 좀 부탁드리려고 합니다ㅠㅠ
목록페이지.html
게시글 선택삭제때문인지 목록페이지에도 <form></form>이 있습니다.
수정페이지html
당연히 글쓰기 폼에 입력된 항목들이 들어가있는지라 <form></form>이 있고
submit버튼이 존재합니다.
조건 : 목록/수정페이지의 form 아이디값, 액션값 모두 똑같고 name은 없는 상태입니다.
목록페이지에서 수정버튼에다가
-----------------------------------------------------------------------------------------
<a href="수정페이지.html?id={$id}" data-toggle="modal" data-target="#myModal">수정</a>
-----------------------------------------------------------------------------------------
이렇게 링크 걸었구요.
또 목록페이지 하단에 모달창 띄워질 부분
-----------------------------------------------------------------------------------------
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div module="myshop_AddrModify">
<iframe width="100%" height="300" frameborder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation" allowtransparency="true"></iframe>
</div>
</div>
</div>
</div>
</div>
-----------------------------------------------------------------------------------------
이렇게 넣어두었습니다.
그리고 js는
-----------------------------------------------------------------------------------------
$('[data-target="#myModal"]').on('click', function (e) {
e.preventDefault();
var _linky = $(this).attr('href');
//var _target = $(this).data('target');
var _target = "_blank";
var $target = $(_target);
if ($target.length > 0) {
$target.find('iframe').attr('src', '');
var _isRemote = false;
if (_linky.indexOf('http') > -1) {
_isRemote = true;
}
if (!_isRemote) {
if (_linky.indexOf('?') > -1) {
_linky += '&tmpl=component';
} else {
_linky += '?tmpl=component';
}
}
$target.find('iframe').attr('src', _linky).load(function() {
$target.modal('show');
});
}
});
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
-----------------------------------------------------------------------------------------
위와 같습니다.
-----------------------------------------------------------------------------------------
<현재 현상>
- 모달창으로 목록페이지에서 수정페이지를 띄우기까지는 잘됨
- 씌워진 모달창 수정페이지 submit을 하면 잘못되었다는 오류메세지 출력뜨면서 수정안됨.
- 그냥 수정페이지내에서는 글수정이 잘됨.
- submit버튼에 마우스를 갖다대면 인터넷 창 좌측하단에 잡히는 링크주소가
주소주소주소/목록페이지.html로 시작할 경우에는 수정안되는거 같고
주소주소주소/수정페이지.html로 시작할 경우에는 수정이 되는거 같은 느낌.
-----------------------------------------------------------------------------------------
부트스트랩 모달창에 아이프레임으로 form을 불러왔을 경우
submit했을때 해당 아이프레임 내부 url을 따르면 되는거 같은데
이럴 경우에는 어떻게 풀어나가면 될까요??
감사합니다ㅠㅠ
답변 2
모달창 iframe 에 "수정페이지.html" 말고 별도의 샘플페이지를 만들어 form submit 처리가 되는지 확인을 해보는 것이 좋을 것 같습니다.
그런 후 문제가 있다면.. 부트스트랩 모달창이 아닌 다른 모달창 플러그인 사용 등을 검토해 볼 수 있습니다.
문제가 없다면.. '오류 메시지'부터 출발하여.. submit 전에 error 가 없는지.. submit 으로 넘겨야 하는 값은 정상적인지, submit 후에 처리페이지에 값이 잘 전달되었는지 등을 하나씩 체크해나가면서 오류를 찾아나가면 될 듯 합니다. (필요하다면, 추가적으로.. 수정페이지 form 의 action 값 id 값 등을 변경해보면서 테스트)
iframe 소스를 올려 보세요.