The generate-classroll-pdf.php page states Modal content is not provided when I click the print button. I can't get the modal body to show up in dompdf.
This is the classroll.php.
<?php
include_once("../includes/connection.php");
include_once("../includes/dataValues.php");
require_once '../dompdf/autoload.inc.php';
$con = connection();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Classroll - MNHS</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.gstatic.com" rel="preconnect">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="../assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="../assets/vendor/quill/quill.snow.css" rel="stylesheet">
<link href="../assets/vendor/quill/quill.bubble.css" rel="stylesheet">
<link href="../assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="../assets/vendor/simple-datatables/style.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="../assets/css/style.css" rel="stylesheet">
<style>
.table {
border-collapse: collapse;
/* Remove border spacing */
width: 100%;
}
.table th,
.table td {
border: none;
/* Remove cell borders */
padding: 8px;
/* Add padding for cell content */
text-align: ;
/* Center-align cell content */
}
.table th {
background-color: #f8f9fa;
/* Add a background color for header cells */
}
.bold-uppercase-row {
text-transform: uppercase;
/* Convert the text to uppercase */
font-weight: ;
/* Make text bold */
}
</style>
</head>
<body>
<?php include 'html/header.php'; ?>
<?php include 'html/sidebar.php'; ?>
<main id="main" class="main">
<div class="pagetitle">
<h1>Classroll</h1>
<!--<nav class="d-flex justify-content-end">Statistics</nav>-->
<nav class="d-flex justify-content-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="dashboard.php">Class</a></li>
<li class="breadcrumb-item active">Classroll</li>
</ol>
</nav>
</div>
<section class="section">
<div class="row justify-content-center"> <!-- Center the content horizontally -->
<div class="col-lg-6">
<div class="card w-100"> <!-- Apply w-100 class to the card to ensure full width -->
<div class="card-body">
<h5 class="card-title">List of Sections</h5>
<!-- Centered and Responsive Table with 100% width -->
<div class="table-responsive"> <!-- Make the table responsive -->
<table class="table w-100"> <!-- Apply w-100 class to ensure full width -->
<thead>
<tr>
<th scope="col">View Classroll</th>
<th scope="col">Section</th>
<th scope="col">Grade Level</th>
<th scope="col">Adviser</th>
<th scope="col">Academic Program</th>
</tr>
</thead>
<?php
$sql = "SELECT * FROM sections
INNER JOIN gradelevel ON gradelevel.gradeID = sections.gradeID
INNER JOIN academic_programs ON academic_programs.academicID = sections.academicID
INNER JOIN teachers ON teachers.teacherID = sections.teacherID";
$sec = $conn->query($sql); // Execute the query using the database connection
if ($sec && $sec->num_rows > 0) { // Check if the query executed successfully
while ($row = $sec->fetch_assoc()) {
//var_dump($row); // Add this line
?>
<tr>
<td>
<button type="button" class="btn btn-primary view-button"
data-bs-toggle="modal" data-bs-target="#exampleModal"
data-section-id="<?php echo $row['sectionID']; ?>">View</button>
</td>
<td>
<?php echo $row['sectionName']; ?>
</td>
<td>
<?php echo $row['gradeLevel']; ?>
</td>
<td>
<?php echo $row['tfname']; ?>
</td>
<td>
<?php echo $row['acadName']; ?>
</td>
</tr>
<?php
}
} else {
?>
<tr>
<td colspan="5">No sections found</td>
</tr>
<?php
}
?>
</table>
</div>
<!-- End Centered and Responsive Table with 100% width -->
</div>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Classroll list</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><strong>Section:</strong> <span id="modalSectionName"></span></p>
<p><strong>Grade Level:</strong> <span id="modalGradeLevel"></span></p>
<p><strong>Adviser:</strong> <span id="modalAdviser"></span></p>
<p><strong>Academic Program:</strong> <span id="modalAcademicProgram"></span></p>
<!-- Table to display students -->
<table class="table table-bordered">
<thead>
<tr>
<th>No.</th>
<th>LRN</th>
<th>Student Name</th>
<th>Gender</th>
<th>Remarks</th>
</tr>
</thead>
<tbody id="studentTableBody">
<!-- Student data will be populated here using JavaScript -->
</tbody>
<tfoot>
<tr>
<tfoot>
<tr>
<th colspan="4">
Total: <span id="totalStudentsCount">0</span>
</th>
</tr>
</tfoot>
</tr>
</tfoot>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button class="btn btn-success" id="printPdfButton">Print</button>
</div>
</div>
</div>
</div>
</main><!-- End #main -->
<!-- ======= Footer =======
<footer id="footer" class="footer">
<div class="copyright">
© Copyright <strong><span>NiceAdmin</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
<!-- Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="../assets/vendor/apexcharts/apexcharts.min.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/chart.js/chart.umd.js"></script>
<script src="../assets/vendor/echarts/echarts.min.js"></script>
<script src="../assets/vendor/quill/quill.min.js"></script>
<script src="../assets/vendor/simple-datatables/simple-datatables.js"></script>
<script src="../assets/vendor/tinymce/tinymce.min.js"></script>
<script src="../assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="../assets/js/jquery-3.7.1.min.js"></script>
<script>
// Function to handle the "View" button click
$(".view-button").click(function () {
var sectionId = $(this).data("section-id"); // Get the section ID from the button's data attribute
// Send an AJAX request to fetch the section details and student data
$.ajax({
url: 'get_section_details.php', // Replace with the actual PHP file that fetches section details and students
type: 'POST',
data: { sectionId: sectionId },
dataType: 'json',
success: function (data) {
// Populate the modal with the retrieved data
$('#modalSectionName').text(data.sectionName);
$('#modalGradeLevel').text(data.gradeLevel);
$('#modalAdviser').text(data.adviserName);
$('#modalAcademicProgram').text(data.academicProgramName);
// Populate the student table
var studentTableBody = $('#studentTableBody');
studentTableBody.empty(); // Clear any previous data
if (data.students && data.students.length > 0) {
// Initialize the student number
var studentNumber = 1;
// Loop through the student data and add rows to the table
data.students.forEach(function (student) {
var row = '<tr class="bold-uppercase-row">' +
'<td>' + studentNumber + '</td>' +
'<td>' + student.lrn + '</td>' +
'<td>' + student.lname + ', ' + student.fname + '</td>' +
'<td>' + student.gender + '</td>' +
'<td>Enrolled</td>' +
'</tr>';
studentTableBody.append(row);
// Increment the student number for the next student
studentNumber++;
});
// Update the total student count
$('#totalStudentsCount').text(data.students.length);
} else {
// If no students found, display a message
studentTableBody.html('<tr><td colspan="5">No students found</td></tr>');
// Update the total student count to 0
$('#totalStudentsCount').text('0');
}
// Show the modal
$('#exampleModal').modal('show');
},
error: function () {
alert('Error fetching section details');
}
});
});
</script>
<script>
$("#printPdfButton").click(function () {
// Get the modal content using jQuery
var modalContent = $("#exampleModal").html();
$.ajax({
url: 'generate-classroll-pdf.php',
method: 'POST',
data: { modalContent: modalContent },
success: function () {
// PDF generated successfully
},
error: function () {
// Handle errors
}
});
});
</script>
</body>
</html>
Here is the get_selection_details.php
<?php
include_once("../includes/connection.php");
$con = connection();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['sectionId'])) {
$sectionId = $_POST['sectionId'];
// Fetch section details from the database based on sectionId
$sqlSection = "SELECT sections.sectionName, gradelevel.gradeLevel, teachers.tfname, academic_programs.acadName
FROM sections
INNER JOIN gradelevel ON gradelevel.gradeID = sections.gradeID
INNER JOIN academic_programs ON academic_programs.academicID = sections.academicID
INNER JOIN teachers ON teachers.teacherID = sections.teacherID
WHERE sections.sectionID = $sectionId";
$resultSection = $con->query($sqlSection);
if ($resultSection && $resultSection->num_rows > 0) {
$rowSection = $resultSection->fetch_assoc();
// Fetch students belonging to the section
$sqlStudents = "SELECT student.fname, student.lname, student.lrn, gender.gender FROM student
INNER JOIN gender ON gender.genderID = student.genderID
WHERE sectionID = $sectionId";
$resultStudents = $con->query($sqlStudents);
$students = array();
if ($resultStudents && $resultStudents->num_rows > 0) {
while ($rowStudent = $resultStudents->fetch_assoc()) {
$students[] = $rowStudent;
}
}
// Prepare JSON response
$response = array(
'sectionName' => $rowSection['sectionName'],
'gradeLevel' => $rowSection['gradeLevel'],
'adviserName' => $rowSection['tfname'],
'academicProgramName' => $rowSection['acadName'],
'students' => $students
);
echo json_encode($response);
} else {
echo json_encode(array('error' => 'Section not found'));
}
} else {
echo json_encode(array('error' => 'Invalid request'));
}
} else {
echo json_encode(array('error' => 'Invalid request method'));
}
?>
Here is the generate-classroll-pdf.php
<?php
require_once '../dompdf/autoload.inc.php';
use Dompdf\Dompdf;
use Dompdf\Options;
if (isset($_POST['modalContent'])) {
$modalContent = $_POST['modalContent'];
// Create Dompdf instance with options
$options = new Options();
$options->set('isHtml5ParserEnabled', true);
$options->set('isPhpEnabled', true);
$dompdf = new Dompdf($options);
// Load the HTML content
$dompdf->loadHtml($modalContent);
// Set paper size and orientation
$dompdf->setPaper('A4', 'portrait');
// Render the PDF
$dompdf->render();
// Output the PDF to the browser
$dompdf->stream('classroll.pdf', ['Attachment' => false]);
} else {
echo "Modal content not provided.";
}
?>
I want to be able to print the whole modal body from dompdf when I click the print button.This is the Modal that I want to print
source https://stackoverflow.com/questions/77174587/print-the-body-of-the-modal-using-dompdf
Hello, my name is Muhammad Athar. I'm a 17 year old student. I'm a Web Developer, Designer and Freelancer. 
No comments:
Post a Comment