105 lines
4.7 KiB
PHP
105 lines
4.7 KiB
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> <?= ICONS['DESKTOP'] ?> <?= $viewDatas['title'] ?> </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">닫기</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 {
|
|
const response = await fetch(url);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP 오류! 상태: ${response.status}`);
|
|
}
|
|
const content = await response.text();
|
|
modalBody.innerHTML = content;
|
|
setupFormSubmission();
|
|
} catch (error) {
|
|
console.error('콘텐츠 로드 중 오류 발생:', error);
|
|
modalBody.innerHTML = '<p>콘텐츠를 로드하는 중 오류가 발생했습니다. 다시 시도해 주세요.</p>';
|
|
}
|
|
}
|
|
|
|
function setupFormSubmission() {
|
|
const form = modalBody.querySelector('form');
|
|
if (form) {
|
|
form.addEventListener('submit', async (e) => {
|
|
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>';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
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 = '';
|
|
});
|
|
</script>
|