cfmgrv4/app/Views/templates/common/modal_fetch.php

<!-- 처음 호출할때 사용법
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#index_action_form" data-src="시작URL">시작</button>
-->
<!-- 동적으로 ifram src 바꾸고싶을때
<span data-bs-toggle="modal" data-bs-target="#index_action_form" data-src="바꾸고싶은URL" style="cursor:pointer;">바꾸기</span>
-->
<div id="index_action_form" class="index_action_form modal fade" tabindex="-1" aria-labelledby="modal_label"
    aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_label">
                    <h4>&nbsp;&nbsp;<?= ICONS['DESKTOP'] ?> <?= $viewDatas['title'] ?>&nbsp;&nbsp;</h4>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-body-content">
                <!-- 여기에 동적으로 콘텐츠가 로드됩니다 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                    onClick="window.location.reload()">닫기</button>
            </div>
        </div>
    </div>
</div>

<script>
    const modal = document.getElementById('index_action_form');
    const modalBody = document.getElementById('modal-body-content');

    async function loadContent(url) {
        try {
            //console.log('콘텐츠 로딩 시작:', url);
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`HTTP 오류! 상태: ${response.status}`);
            }
            const content = await response.text();
            //console.log('받은 콘텐츠:', content.substring(0, 100) + '...'); // 콘텐츠의 처음 100자만 로그
            modalBody.innerHTML = content;

            //console.log('form.js 로딩 시작');
            const formScriptPath = '/js/<?= $viewDatas['layout'] ?>/form.js';
            //console.log('form.js 경로:', formScriptPath);

            try {
                await loadScript(formScriptPath);
                //console.log('form.js 로드 완료');
                if (typeof window.initializeForm === 'function') {
                    //console.log('initializeForm 함수 실행');
                    window.initializeForm();
                } else {
                    //console.log('initializeForm 함수를 찾을 수 없음');
                }
            } catch (scriptError) {
                console.error('form.js 로드 중 오류 발생:', scriptError);
            }

            //console.log('추가 스크립트 실행 시작');
            const scripts = modalBody.getElementsByTagName('script');
            for (let script of scripts) {
                if (script.src) {
                    //console.log('외부 스크립트 로드:', script.src);
                    const newScript = document.createElement('script');
                    newScript.src = script.src;
                    document.body.appendChild(newScript);
                } else {
                    //console.log('인라인 스크립트 실행');
                    eval(script.innerHTML);
                }
            }
            //console.log('setupFormSubmission 실행');
            setupFormSubmission();
        } catch (error) {
            console.error('콘텐츠 로드 중 오류 발생:', error);
            modalBody.innerHTML = '<p>콘텐츠를 로드하는 중 오류가 발생했습니다. 다시 시도해 주세요.</p>';
        }
    }

    function setupFormSubmission() {
        //console.log('setupFormSubmission 시작');
        const form = modalBody.querySelector('form');
        if (form) {
            //console.log('폼 찾음:', form);
            form.addEventListener('submit', async (e) => {
                //console.log('폼 제출 이벤트 발생');
                e.preventDefault();
                const formData = new FormData(form);
                try {
                    const response = await fetch(form.action, {
                        method: 'POST',
                        body: formData
                    });
                    const contentType = response.headers.get("content-type");
                    if (contentType && contentType.indexOf("application/json") !== -1) {
                        const result = await response.json();
                        if (result.success) {
                            modalBody.innerHTML = '<p>데이터가 성공적으로 저장되었습니다.</p>';
                            setTimeout(() => {
                                bootstrap.Modal.getInstance(modal).hide();
                                window.location.reload();
                            }, 2000);
                        } else {
                            modalBody.innerHTML = result.html;
                            setupFormSubmission(); // 새로운 폼에 대해 다시 이벤트 리스너 설정
                        }
                    } else {
                        // HTML 응답 처리
                        const htmlContent = await response.text();
                        modalBody.innerHTML = htmlContent;

                        // HTML에 포함된 스크립트 실행
                        const scripts = modalBody.getElementsByTagName('script');
                        for (let script of scripts) {
                            eval(script.innerHTML);
                        }

                        setupFormSubmission(); // 새로운 폼에 대해 다시 이벤트 리스너 설정
                    }
                } catch (error) {
                    console.error('폼 제출 중 오류 발생:', error);
                    modalBody.innerHTML = '<p>데이터 저장 중 오류가 발생했습니다. 다시 시도해 주세요.</p>';
                }
            });
        } else {
            //console.log('폼을 찾을 수 없음');
        }
    }

    modal.addEventListener('show.bs.modal', (event) => {
        const button = event.relatedTarget;
        const url = button.getAttribute('data-src');
        if (url) {
            loadContent(url);
        } else {
            console.error('data-src 속성이 없습니다.');
            modalBody.innerHTML = '<p>URL을 찾을 수 없습니다. 다시 시도해 주세요.</p>';
        }
    });

    modal.addEventListener('hidden.bs.modal', () => {
        modalBody.innerHTML = '';
    });

    function loadScript(src) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.onload = () => {
                //console.log(`스크립트 로드 완료: ${src}`);
                resolve();
            };
            script.onerror = () => reject(new Error(`스크립트 로드 실패: ${src}`));
            document.body.appendChild(script);
        });
    }

    // 모달이 완전히 표시된 후 form.js 초기화 함수 호출
    document.getElementById('index_action_form').addEventListener('shown.bs.modal', function() {
        if (typeof window.initializeForm === 'function') {
            //console.log('모달 표시 후 initializeForm 함수 실행');
            window.initializeForm();
        } else {
            //console.log('모달 표시 후에도 initializeForm 함수를 찾을 수 없음');
        }
    });
</script>