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

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

QA

부트스트랩 모달창에 아이프레임으로 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 소스를 올려 보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,532 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT