Spring MVC 및 jQuery DataTable을 사용한 부트 스트랩 모달 팝업

내 앱 개발 (Spring Boot, Bootstrap, jQuery 및 jdbcTemplate으로 만든)에서 양식을 테이블 형식으로 쿼리 한 후 표시 할 결과가 몇 가지 있으며이를 달성하기 위해 jQuery DataTable을 사용했습니다. 모두 완벽하게 작동합니다.

다음 작업은 일부 필드를 편집하는 버튼이있는 테이블에 열을 추가하는 것입니다. 예를 들어, 이벤트 데이터의 경우 버튼을 클릭하면 2 개의 값, 메모 및 상태를 수정할 수 있어야합니다.

이를 수행하기 위해 DataTable 코드가있는 js 파일에 Bootstrap 모달 (처음으로이 도구를 사용하는 newbee)을 사용했습니다.

다음은 js 파일의 코드입니다.

var DTevents = false;
$(document).ready(function() {  

    DTevents = $('#eventsdata').DataTable( 
            { 
                "serverSide": true,
                "ajax":{
                            url: "../getevents.json",
                            type: "post",
                            "data": function (d)
                            {
                                d = $.extend(d, {statusname :  $('#statusname').val()}, {typename :  $('#typename').val()}, {infoname :  $('#infoname').val()},
                                                {notename :  $('#notename').val()}, {idname :  $('#idname').val()}, {username :  $('#username').val()}, 
                                                {hostname :  $('#hostname').val()});
                            }

                       },
                "columns":  [
                    { "data": "date" },
                    { "data": "type" },
                    { "data": "name" },
                    { "data": "user_name" },
                    { "data": "status" },
                    { "data": "closing_date" },
                    { "data": "info" },
                    { "data": "note" },
                    { "render": function(o){
                        return '<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>' +
                        '<div id="myModal" class="modal fade" role="dialog">' +
                        '<div class="modal-dialog">' +
                        '<div class="modal-content">' +
                              '<div class="modal-header">' +
                                '<button type="button" class="close" data-dismiss="modal">&times;</button>' +
                                '<h4 class="modal-title">Modal Header</h4>' +
                              '</div>' +
                              '<div class="modal-body">' +
                              '<form class="form-horizontal" role="form">' +
                              '<div class="form-group">' +
                                '<label  class="col-sm-2 control-label"' +
                                          'for="inputNotes">Notes</label>' +
                                '<div class="col-sm-10">' +
                                    '<input type="text" class="form-control"' + 
                                    'id="newnote" placeholder="Put here the note"/>' +
                                '</div>' +
                              '</div>' +
                              '<div class="form-group">' +
                                '<label for = "type" class = "col-sm-2 control-label">Status</label>' +
                             '<div class = "col-sm-10">' +
                            '<select class = "form-control" id = "typename" name="type options">' +
                            '<option value="open">open</option>' +
                                '<option value="closed">closed</option>' +
                            '</select>' +
                         '</div>' +
                              '</div>' +
                            '</form>' +
                            '</div>'  +
                              '</div>' +
                              '<div class="modal-footer">' +
                                '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
                                '<button type="submit" class="btn btn-default" data-dismiss="modal">Save</button>' +
                              '</div>' +
                            '</div>' +
                          '</div>' +
                        '</div>';
                    } }
                ]
            } );
    } );

이 코드를 사용하여 예를 들어 os 유형에서 양식을 쿼리하면 다음 출력을 얻습니다.

테이블 결과 팝업 결과

보시다시피 양식 편집 팝업이 나타납니다. 그리고 괜찮습니다. 그래서, 무엇이 문제입니까?

1. 나를 위해 모달 코드를 데이터 테이블의 js 파일에 직접 넣는 것은 끔찍합니다. 이 js 파일로 가져 오거나 포함 할 외부 파일을 갖고 싶습니다. 이것을 달성 할 수 있습니까?

2. 이 양식은 "빈"양식입니다. 진정한 상호 작용이 아니라는 것을 의미합니다. 저장 버튼을 클릭하면 수정되지 않습니다. 나는 DAO와 컨트롤러 Spring mvc를 만들었다. 그래서 나는 이것에 폼을 "링크"해야한다. 나머지 프로젝트에서는 jsp 파일을 사용하기 때문에이 작업을 쉽게 수행합니다. 그러나이 형식은 물론 jsp 파일에 없습니다. 그래서, 내 질문은 : 만약 내가 jsp 파일 안에 모달의 코드를 넣으면,이 파일을 DataTable의 js 파일 안에 사용할 수 있습니까? 그리고 그렇지 않다면 어떻게이 양식을 진정한 대화 형으로 만들 수 있습니까?

업데이트 : 아래 응답 후 다음과 같이 코드를 수정했습니다.

(데이터 열에서)

{ "render": function ( data, type, full) {

                        return '<a class="btn btn-info btn-md">' + 'Edit' + '</a>';
                    }
                  }

(이벤트 heandling에 대한 기능 #mymodal, 다른 jsp에 정의 된 모달의 ID입니다. 참고 : 지금은 데이터 논리를 구현하지 않았고 컨트롤러로 보내기를 원하기 때문에 팝업이 열려 있는지 확인하기를 원합니다)

$("#eventsdata").on("click", ".btn btn-info btn-sm", function () {
    var html = "/jsp/editbutton.jsp";
    $("#eventsdata").load(html);
    $("#myModal").modal('show');
});

editbutton.jsp는 모달 코드를 입력하고 아래에있는 파일입니다. src/main/webapp/WEB-INF/jsp

그러나 내 코드가 작동하지 않습니다. 팝업 모달이 열리지 않습니다. 버튼은 보이지만 클릭해도 아무 일도 일어나지 않습니다. 내가 뭘 잘못 했어?

EDIT2 : 설립. 문제는 두 배였다. "on"함수의 코드는 준비된 문서 밖에 있었다. 버튼 클래스는 항상 on 함수 안에 있어야합니다.

".btn btn-info btn-sm"

그러나

".btn.btn-info.btn-md"

EDIT3 : 코드는 다음과 같습니다.

var DTevents = false; $ (문서) .ready (function () {

DTevents = $('#eventsdata').DataTable( 
        { 
            "serverSide": true,
            "ajax":{
                        url: "../getevents.json",
                        type: "post",
                        "data": function (d)
                        {
                            d = $.extend(d, {statusname :  $('#statusname').val()}, {typename :  $('#typename').val()}, {infoname :  $('#infoname').val()},
                                            {notename :  $('#notename').val()}, {idname :  $('#idname').val()}, {username :  $('#username').val()}, 
                                            {hostname :  $('#hostname').val()});
                        }

                   },
            "columns":  [
                { "data": "date" },
                { "data": "type" },
                { "data": "name" },
                { "data": "user_name" },
                { "data": "status" },
                { "data": "closing_date" },
                { "data": "info" },
                { "data": "note" },
                { "render": function ( data, type, full, meta) {

                        return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-target='#myModal'> Edit </button>";
                }
              }
            ]
        } ); 

});

실제 문제는 두 가지 모달 쇼 솔루션 (jquery 함수 .on("click")와 코드에 사용 된 것 사용 data-toggle='modal' data-target='#myModal') 모두 주요 문제를 해결하지 못한다는 것입니다. 모달 코드로 외부 jsp를 어떻게로드 할 수 있습니까?

보다 구체적으로 문제는 무엇을 사용하는지 (jquery로드 기능을 사용할 수 있다고 가정)가 아니라 어디에서 사용하는지입니다. 예를 들어, on #eventsdata(즉, 테이블 제목이있는 페이지의 ID이고 데이터 테이블을 사용하는 페이지의 ID)을 사용하는 경우 (물론) 테이블 데이터를 다른 항목과 함께 사용하고 이것은 모달이 아닙니다. 빈 페이지가 있습니다).