Add debugging for modal initialization issue

Added console logging to diagnose why Demo Credentials modal
is not opening despite no visible errors.

Changes:
- Log button click event
- Log Bootstrap availability check
- Log modal element existence
- Log fetch response status
- Log content length after loading
- Log modal instance creation
- Check Bootstrap.Modal availability before use

This will help identify whether the issue is with event binding,
Bootstrap loading, fetch requests, or modal initialization.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ken Johnson
2025-12-07 01:36:45 -05:00
parent c5cd2828a5
commit b6fa2db72e
+22 -5
View File
@@ -159,18 +159,35 @@
newBtn.addEventListener('click', function(event) { newBtn.addEventListener('click', function(event) {
event.preventDefault(); event.preventDefault();
console.log('Demo Credentials button clicked');
console.log('Bootstrap available:', typeof bootstrap !== 'undefined');
console.log('Modal element:', modalElement);
fetch('<%= credentials_tutorials_path %>') fetch('<%= credentials_tutorials_path %>')
.then(response => response.text()) .then(response => {
console.log('Fetch response status:', response.status);
return response.text();
})
.then(html => { .then(html => {
console.log('Content loaded, length:', html.length);
document.getElementById('modal_content').innerHTML = html; document.getElementById('modal_content').innerHTML = html;
const modal = new bootstrap.Modal(modalElement);
modal.show(); if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
const modal = new bootstrap.Modal(modalElement);
console.log('Modal instance created:', modal);
modal.show();
} else {
console.error('Bootstrap Modal not available');
}
}) })
.catch(error => { .catch(error => {
console.error('Error loading credentials:', error); console.error('Error loading credentials:', error);
document.getElementById('modal_content').innerHTML = '<p class="text-danger">Error loading credentials. Please try again.</p>'; document.getElementById('modal_content').innerHTML = '<p class="text-danger">Error loading credentials. Please try again.</p>';
const modal = new bootstrap.Modal(modalElement);
modal.show(); if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
const modal = new bootstrap.Modal(modalElement);
modal.show();
}
}); });
}); });
} }