File: /mnt/data/dev/dev-doccure-wp/wp-content/plugins/doccure/debug-view-prescription.html
<!DOCTYPE html>
<html>
<head>
<title>View Prescription Debug Test</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.test-button {
background: #28a745;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
.debug-info {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>View Prescription Debug Test</h1>
<div class="debug-info">
<h3>Debug Information:</h3>
<p><strong>Test Booking ID:</strong> <span id="test-booking-id">123</span></p>
<p><strong>AJAX URL:</strong> <span id="ajax-url">Checking...</span></p>
<p><strong>Nonce:</strong> <span id="nonce">Checking...</span></p>
<p><strong>jQuery Loaded:</strong> <span id="jquery-status">Checking...</span></p>
<p><strong>Bootstrap Modal:</strong> <span id="bootstrap-status">Checking...</span></p>
</div>
<button class="test-button" onclick="testViewPrescription()">Test View Prescription Button</button>
<button class="test-button" onclick="testModal()">Test Modal Directly</button>
<button class="test-button" onclick="testAJAX()">Test AJAX Call</button>
<div id="results" style="margin-top: 20px;"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Check if jQuery is loaded
if (typeof jQuery !== 'undefined') {
document.getElementById('jquery-status').textContent = '✅ Loaded';
} else {
document.getElementById('jquery-status').textContent = '❌ Not Loaded';
}
// Check if Bootstrap modal is available
if (typeof jQuery !== 'undefined' && jQuery.fn.modal) {
document.getElementById('bootstrap-status').textContent = '✅ Available';
} else {
document.getElementById('bootstrap-status').textContent = '❌ Not Available';
}
function testViewPrescription() {
var results = document.getElementById('results');
results.innerHTML = '<h3>Testing View Prescription Button...</h3>';
// Create a test button
var testBtn = document.createElement('button');
testBtn.className = 'dc-btn add-new-btn dc-viewbtn view-prescription-btn';
testBtn.setAttribute('data-booking-id', '123');
testBtn.textContent = 'View Prescription';
testBtn.onclick = function(e) {
e.preventDefault();
results.innerHTML += '<p>✅ Button click detected</p>';
var bookingId = this.getAttribute('data-booking-id');
results.innerHTML += '<p>Booking ID: ' + bookingId + '</p>';
// Check if modal exists
var modal = document.getElementById('view_prescription_modal');
if (modal) {
results.innerHTML += '<p>✅ Modal found in DOM</p>';
} else {
results.innerHTML += '<p>❌ Modal not found in DOM</p>';
}
};
document.body.appendChild(testBtn);
testBtn.click();
}
function testModal() {
var results = document.getElementById('results');
results.innerHTML = '<h3>Testing Modal Directly...</h3>';
var modal = document.getElementById('view_prescription_modal');
if (modal) {
results.innerHTML += '<p>✅ Modal found</p>';
if (typeof jQuery !== 'undefined' && jQuery.fn.modal) {
jQuery(modal).modal('show');
results.innerHTML += '<p>✅ Modal shown</p>';
} else {
results.innerHTML += '<p>❌ Bootstrap modal not available</p>';
}
} else {
results.innerHTML += '<p>❌ Modal not found</p>';
}
}
function testAJAX() {
var results = document.getElementById('results');
results.innerHTML = '<h3>Testing AJAX Call...</h3>';
if (typeof jQuery === 'undefined') {
results.innerHTML += '<p>❌ jQuery not available</p>';
return;
}
// Check if doccure_view_obj is available
if (typeof doccure_view_obj === 'undefined') {
results.innerHTML += '<p>❌ doccure_view_obj not defined</p>';
return;
}
results.innerHTML += '<p>✅ doccure_view_obj found</p>';
results.innerHTML += '<p>AJAX URL: ' + doccure_view_obj.ajax_url + '</p>';
results.innerHTML += '<p>Nonce: ' + doccure_view_obj.ajax_nonce + '</p>';
// Test AJAX call
jQuery.ajax({
url: doccure_view_obj.ajax_url,
type: 'POST',
data: {
action: 'doccure_get_view_prescription_content',
booking_id: '123',
security: doccure_view_obj.ajax_nonce
},
success: function(response) {
results.innerHTML += '<p>✅ AJAX Success</p>';
results.innerHTML += '<p>Response Type: ' + response.type + '</p>';
if (response.type === 'error') {
results.innerHTML += '<p>Error: ' + response.message + '</p>';
}
},
error: function(xhr, status, error) {
results.innerHTML += '<p>❌ AJAX Error</p>';
results.innerHTML += '<p>Status: ' + status + '</p>';
results.innerHTML += '<p>Error: ' + error + '</p>';
}
});
}
</script>
</body>
</html>