부트스트랩 모달창에 아이프레임으로 form 띄웠을때

부트스트랩 모달창에 아이프레임으로 form 띄웠을때

QA

부트스트랩 모달창에 아이프레임으로 form 띄웠을때

답변 2

본문

부득이하게 게시판같은 리스트 페이지에서(그누보드는 아닙니다요)

수정페이지를 부트스트랩 아이프레임 소스를 이용해 모달창으로 띄우긴했습니다.

근데 수정확인 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 소스를 올려 보세요.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 14
© SIRSOFT
현재 페이지 제일 처음으로