d_s_bisht/devsofttech_hms_ci4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent modal hang/fade by moving it outside refreshable panel div

Browse Source 
- Move detail modal from system_ops_panel.php to system_ops.php
- Modal is now outside #systemOpsPanel so panel refresh never destroys it
- Skip refreshPanel() while modal is open (prevents backdrop desync)
- Add hidden.bs.modal handler to clean up lingering backdrop and body classes
- Fix show.bs.modal handler to correctly read data-detail via jQuery .data()
- Add white-space:pre-wrap to detail content for readable log output
This commit is contained in:
DevSoftTech Server 2026-08-04 03:55:27 +05:30
parent f349b33001
commit 3fed2b6740
2 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/Views/Setting/Admin/system_ops.php
View File

@ -29,6 +29,24 @@
<?= view('Setting/Admin/system_ops_panel', ['status' => $status, 'history' => $history]) ?>
</div>
<!-- Detail Modal: outside #systemOpsPanel so panel refresh never destroys it -->
<div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Operation Details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<pre id="detailContent" style="max-height:400px; overflow-y:auto; background:#f8f9fa; padding:12px; border-radius:4px; white-space:pre-wrap; word-break:break-word;"></pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
function setHealthState(state) {
if (typeof $ === 'undefined') return;
@ -40,6 +58,8 @@
function refreshPanel() {
if (typeof $ === 'undefined') return;
// Skip refresh while detail modal is open to avoid destroying its DOM
if ($('#detailModal').hasClass('show')) return;
$.ajax({
url: '<?= base_url('setting/admin/system-ops/panel') ?>',
type: 'GET',
@ -88,6 +108,19 @@
setHealthState('healthy');
setInterval(function(){ refreshPanel(); }, 30000);
// Populate detail modal from data-detail attribute on the triggering button
$(document).on('show.bs.modal', '#detailModal', function(e) {
var btn = e.relatedTarget;
var detail = btn ? ($(btn).data('detail') || '') : '';
$('#detailContent').text(detail);
});
// Clean up backdrop on modal hidden (prevents stuck overlay after panel refresh)
$(document).on('hidden.bs.modal', '#detailModal', function() {
$('.modal-backdrop').remove();
$('body').removeClass('modal-open').css('padding-right', '');
});
$(document).off('click', '#btnUpdateDirectGithub')
.on('click', '#btnUpdateDirectGithub', function(){ if (!confirm('Deploy latest HMS code from GitHub?\n\nThis will download the latest code and update all files.')) return; postAction('<?= base_url('setting/admin/system-ops/updateDirect') ?>', {}, this); });
}

30
app/Views/Setting/Admin/system_ops_panel.php
View File

@ -293,33 +293,3 @@
</div>
</div>
</div>
<!-- Detail Modal -->
<div class="modal fade" id="detailModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Operation Details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<pre id="detailContent" style="max-height: 400px; overflow-y: auto; background: #f8f9fa; padding: 12px; border-radius: 4px;"></pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
// Handle detail modal
document.addEventListener('show.bs.modal', function(e) {
if (e.relatedTarget && e.relatedTarget.id === 'detailModal' || (e.relatedTarget && e.relatedTarget.closest('[data-bs-target="#detailModal"]'))) {
var btn = e.relatedTarget;
if (!btn) btn = event.target;
var detail = btn.getAttribute('data-detail') || '';
document.getElementById('detailContent').textContent = detail;
}
});
</script>