뷰에서 모달로 데이터 전달

 

뷰에서 모달로 데이터 전달

 

<div id="" name="">
    <div class="col-lg-12">
        <label>Upload History:</label>
        <div class="text-right">
            <label>${uploadCount???then(uploadCount,'')}</label>
            <label>items</label>
        </div>
    </div>
    <div class="col-lg-12">
        <table class="">
            <thead>
                <tr>
                    <th class="col-lg-1">No</th>
                    <th class="col-lg-3">Upload date and time</th>
                    <th class="col-lg-3">File name</th>
                    <th class="col-lg-2">Download</th>
                    <th class="col-lg-3">Date of download</th>
                </tr>
            </thead>
            <tbody>
                <#if testList?has_content>
                    <#list testList as list>
                    <tr>
                        <td class="col-lg-1 upload-list-index">${list_index + 1}</td>
                        <td class="col-lg-3 test1" id="test1" name="test1">${list.test1}</td>
                        <input type="hidden" class="test2" id="test2" name="test2" value="${list.test2}">
                        <td class="col-lg-3 test3" id="test3" name="test3">${list.test3}</td>
                        <td class="col-lg-2">
                            <a class="passwordModal" data-toggle="modal" href="#passwordModal" data-backdrop="static" data-keyboard="false">Download</a>
                        </td>
                        <td class="col-lg-3 test4" id="test4" name="test4">${list.test4}</td>
                    </tr>
                    </#list>
                </#if>
            </tbody>
        </table>
    </div>
</div>
<!--Password Modal-->
<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="passwordModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Password Authentication</h5>
            </div>
            <form id="downloadForm" name="downloadForm" action="" method="post">
                <input type="hidden" name="uploadCountModal" id="uploadCountModal" value="">
                <input type="hidden" name="test3Modal" id="test3Modal" value="">
                <input type="hidden" name="test2Modal" id="test2Modal" value="">
                <div class="row modal-body">
                    <div class="col-sm-4">
                        <div>password:</div>
                    </div>
                    <div class="col-sm-8">
                        <input class="inputText" type="password" id="password" name="password" value="">
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="" name="" type="button">Confirm</button>
                    <button class="btn" type="button" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

$(document).ready(function () {
    // 뷰의 데이터를 모달로 전달
    $(".passwordModal").click(function () {
        let $parentDiv = $(this).closest("tr");
        let uploadCount = $parentDiv.find(".upload-list-index").text().trim();
        let test2 = $parentDiv.find(".test2").val();
        let test3 = $parentDiv.find(".test3").text().trim();

        $("#uploadCountModal").val(uploadCount);
        $("#test2Modal").val(test2);
        $("#test3Modal").val(test3);
    });

    // 에러메세지모달의 OK버튼을 클릭시 패스워드모달 표시 
    $("#modalOKButton").click(function () {
        // 모달만 선택가능 하도록 처리
        $("#passwordModal").modal({backdrop: 'static', keyboard: false});
        $("#password").val("");
    });

    // 패스워드모달의 취소버튼을 클릭시 return
    $("#passwordModal").on("hidden.bs.modal", function () {
        $("#password").val("");
        return;
    });
});

 

◇ 뷰 초기 실행: $(document).ready(function () { ... });는 HTML 문서가 로드될 때 실행될 함수를 정의합니다. 이것은 일반적으로 페이지의 모든 요소가 준비된 후 실행되어야 하는 코드를 감싸는 데 사용됩니다.

◇ 데이터를 뷰에서 모달로 전달: .passwordModal 클래스를 가진 요소(버튼 또는 링크)를 클릭하면 이벤트가 발생합니다. 클릭된 버튼이 속한 <tr> 요소를 찾아서 그 안에서 특정 데이터를 가져옵니다. 이 데이터는 업로드 카운트(uploadCount), test2, 그리고 test3입니다. 이 데이터를 가져와서 모달 창의 해당 입력 필드에 설정합니다.

◇ 비밀번호 모달 표시: "modalOKButton" 요소를 클릭하면 모달 창을 표시하는 이벤트가 발생합니다. backdrop 및 keyboard 속성을 사용하여 모달 창 외부를 클릭하거나 키보드로 모달 창을 숨기는 것을 방지합니다. 비밀번호 입력 필드(#password)를 초기화합니다.

◇ 비밀번호 모달 닫기: "passwordModal" 모달이 닫힐 때(hidden.bs.modal 이벤트) 비밀번호 입력 필드를 초기화하고 함수를 종료합니다.