개발 Q&A

제목 summernote+bootstrap modal+ajax 실행문제
카테고리 기타
글쓴이 길산 작성시각 2020/06/08 20:17:34
댓글 : 4 추천 : 0 스크랩 : 0 조회수 : 10063   RSS

아래 소스처럼 index.asp 페이지에는 summernote와 bootstrap modal 창을 띄우는 버튼이 있고 버튼을 클릭하면 모달창이 나타나며, 텍스트필드에 값을 입력하고 ADD버튼을 클릭하면 모달창 <div>에 입력한 값이 출력되도록 하는 소스입니다. 그런데 문제는 summernote를 실행시키지 않으면 모달창에서 ajax가 잘 실행이 되는데summernote를 실행하면 모달창에서 ajax가 전혀 실행되지않습니다.해결방법을 알려주시는 분께는 소정의 사례를 하겠습니다.

==============================================================

index.asp

==============================================================

<!DOCTYPE html>

<html lang="ko">

    <head>

        <title>Bootstrap Example</title>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

        <!-- include summernote css/js -->

        <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

    </head>

    <body>

        <div class="container">

            <form role="form" method="post" id="addForm" class="form-horizontal">

                <div id="summernote">Hello Summernote</div>

                <div class="panel-button pull-right">

                    <a href="javascript:void(0);" data-href="modal.asp" class="btn btn-success rounded fullModal"> 모달</a> 

                </div>

            </form>

            <!-- Modal -->

            <div id="fullModal" class="modal modal-center fade" tabindex="-1" role="dialog">

                <div class="modal-dialog modal-center">

                    <!-- Modal content-->

                    <div class="modal-content "></div>

                </div>

            </div>

            <script>

            $(document).ready(function(){

                $('#summernote').summernote();

                

                $(".fullModal").on("click",function(){

                    var dataURL = $(this).attr("data-href");

                    $(".modal-content").load(dataURL,function(){

                        $("#fullModal").modal({show:true});

                    });

                });

            });

            </script>

        </div>

    </body>

</html>

=======================================================

modal.asp

=======================================================

<div class="modal-header">

    <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">×</button>

    <h3 class="modal-title">모달</h3>

</div>

<div class="modal-body">

    <form role="form" class="form-horizontal" id="add_form" method="post">

        <input type="text" id="addVal" name="addVal" class="form-control">

        <div class="button">

            <button type="button" class="btn btn-primary btn-circle btn-icon btn-lg" onclick="AddFunc();return false;">ADD</button>

        </div>

    </div>

    <div id="printDiv"></div>

    </form>

</div>

<div class="modal-footer">

    <div class="pull-right">

        <button id="modalclose" class="btn btn-lg btn-danger rounded" data-dismiss="modal">닫기</button>

    </div>

</div>

<script>

function AddFunc(){

    var formData = $("#add_form").serialize();

    $.ajax({

        type: "POST",

        url:"answer.asp",

        data: formData,

        cache: false,

        success:function(data){

            $("#printDiv").html(data);

        },

        error: function(data) {

            alert("AJAX Error!");

        }

    });

}

</script>

=======================================================

answer.asp

=======================================================

<%val = Request.Form("addVal")

Response.Write(val)%>
 다음글 php로 aws 이미지 딥러닝(이미지 학습) 예제가 있... (1)
 이전글 CI 3 서버의 동영상 파일 스트리밍 - 서버 동영상 ... (2)
목록

댓글

벤지 / 2020/06/08 21:04:25 / 추천 0 
아래 삭제한 후, 저의 크롬 브라우져에서 Ajax Call 되는것 확인 했습니다.

<div class="button">

            <button type="button" class="btn btn-primary btn-circle btn-icon btn-lg" onclick="AddFunc();return false;">ADD</button>

        </div>

</div>   <----------------------------------------------------- 이거 삭제

    <div id="printDiv"></div>

 

만약, 해결 되셨다면,  cikorea  운영자님에게 소정의 사례를 해주시구요.

 

=====================================(   아래는 제가 확인하기 위해 정리한 코드입니다. )==================================

 

index.html  )------------------------------------------------------------------

 

<!DOCTYPE html>

<html lang="ko">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />

  <!-- include summernote css/js -->

  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>

<body>
  <div class="container">
    <form role="form" method="post" id="addForm" class="form-horizontal">
      <div id="summernote">Hello Summernote</div>

      <div class="panel-button pull-right">
        <a href="javascript:void(0);" data-href="modal.html" class="btn btn-success rounded fullModal">
            모달</a
          >
        </div>
      </form>

      <!-- Modal -->

      <div
        id="fullModal"
        class="modal modal-center fade"
        tabindex="-1"
        role="dialog"
      >
        <div class="modal-dialog modal-center">
          <!-- Modal content-->
          <div class="modal-content"></div>
        </div>
      </div>

      <script type="text/javascript">
        $(document).ready(function () {
          $('#summernote').summernote()

          $('.fullModal').on('click', function () {
            var dataURL = $(this).attr('data-href')

            $('.modal-content').load(dataURL, function () {
              $('#fullModal').modal({ show: true })
            })
          })
        })
      </script>
    </div>
  </body>
</html>

 

modal.html  )------------------------------------------------------------------

 

 

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">
    ×
  </button>
  <h3 class="modal-title">모달</h3>
</div>

<div class="modal-body">
  <form role="form" class="form-horizontal" id="add_form" method="post">
    <input type="text" id="addVal" name="addVal" class="form-control" />
    <div class="button">
      <button type="button" class="btn btn-primary btn-circle btn-icon btn-lg" onclick="AddFunc();return false;">
        ADD
      </button>
    </div>
    <!-- </div> -->
    <div id="printDiv"></div>
  </form>
</div>

<div class="modal-footer">
  <div class="pull-right">
    <button id="modalclose" class="btn btn-lg btn-danger rounded" data-dismiss="modal">
      닫기
    </button>
  </div>
</div>

<script>
  function AddFunc() {
    var formData = $('#add_form').serialize()
    $.ajax({
      type: 'POST',
      url: 'answer.asp',
      data: formData,
      cache: false,
      success: function(data) {
        $('#printDiv').html(data)
      },
      error: function(data) {
        alert('AJAX Error!')
      }
    })
  }
</script>

 
길산 / 2020/06/08 22:00:52 / 추천 0

제가 하고자 하는 것은 아래 그림처럼 모달창에서 input필드에 값을 입력하고 ADD버튼을 클릭하면 아래그림처럼 ADD버튼 아래에 입력한 값이 출력되어야 하는데, 위 소스로는 해결이 안되네요. ㅠㅠㅠ

모달
길산 / 2020/06/08 23:12:01 / 추천 0

꼼수지만 모달창을 띄울때

$('#summernote').summernote('destroy');

를 이용해서 잠시 summernote를 폭파시키고 모달창을 닫을때 다시 summernote를 로드하는 방식으로 해결했네요. ㅠㅠㅠ
벤지 / 2020/06/08 23:16:17 / 추천 0

본글 질문 요점

"  summernote를 실행하면 모달창에서 ajax가 전혀 실행되지않습니다. 해결방법을 알려주시는 분께는 소정의 사례를 하겠습니다. "

말씀하신 폭파 시키는 방법은 꼼수가 아니라, 회피입니다.

 

사회가 더욱더 험악해지는 것은

약속이란걸 웃음께 보며,

작은것부터 지키지 않는 일부 개인들이 모여 만들어지는것입니다.