I want a add education form modal to be displayed when the add education button from the education tab is clicked. But the modal addEducationModal is not displayed as expected. this is the error i get from the inspect panel:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at <anonymous>:15:38
at b (jquery-3.6.0.min.js:2:866)
at Function.globalEval (jquery-3.6.0.min.js:2:2905)
at Object.dataFilter (jquery-3.6.0.min.js:2:80720)
at jquery-3.6.0.min.js:2:79185
at l (jquery-3.6.0.min.js:2:79587)
at XMLHttpRequest.<anonymous> (jquery-3.6.0.min.js:2:82355)
at Object.send (jquery-3.6.0.min.js:2:82714)
at Function.ajax (jquery-3.6.0.min.js:2:78291)
at S._evalUrl (jquery-3.6.0.min.js:2:80586)
this the php file , jobSeekerProfile.php:
<?php
session_start(); // Start the session
include("connect.php");
// Include header and tabs for non-AJAX requests
if (empty($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
include("homeHeader.php");
include("jobSeekerTab.html");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Senior UX Designer Job Listing</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-4">
<script>
$(document).ready(function () {
var educationContent = <?php echo json_encode($educationContent); ?>;
// Inject the table into the "profile" tab pane
$('#v-pills-profile').html(`
<h2>Profile</h2>
<!-- Nav tabs for Basic Details, Education, and Experience -->
<ul class="nav nav-tabs" id="profileTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="basicDetails-tab" data-toggle="tab" href="#basicDetails" role="tab" aria-controls="basicDetails" aria-selected="true">Basic Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="education-tab" data-toggle="tab" href="#education" role="tab" aria-controls="education" aria-selected="false">Education</a>
</li>
</ul>
<div class="tab-content">
<!-- Basic Details Tab -->
<div class="tab-pane fade show active" id="basicDetails" role="tabpanel" aria-labelledby="basicDetails-tab">
<!-- <h4 class="mt-3">Basic Details</h4> -->
<form action="updateJobSeekerProfile.php" method="post" enctype="multipart/form-data">
// form code
</form>
</div>
<!-- Education Tab -->
<div class="tab-pane fade" id="education" role="tabpanel" aria-labelledby="education-tab">
${educationContent}
<!-- Add Education Button -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addEducationModal" id="addEducationBtn">Add education</button>
</div>
</div>
</div>
`);
});
</script>
</div>
<!-- Add Education Modal -->
<div class="modal fade" id="addEducationModal" tabindex="-1" aria-labelledby="addEducationModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addEducationModalLabel">Add Education</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="addEducationForm">
<!-- Input fields for University, Major, StartDate, EndDate, Degree -->
<div class="mb-3">
<label for="university" class="form-label">University</label>
<input type="text" class="form-control" id="university" name="university" required>
</div>
<!-- Add other fields (Major, StartDate, EndDate, Degree) similarly -->
<!-- ... -->
<button type="submit" class="btn btn-primary">Add</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
<script src ="scripts.js"></script>
</body>
</html>
The script to display the add education modal when the button is clicked in scripts.js:
$(document).ready(function () {
$(document).on('click', '#addEducationBtn', function() {
var addEducationModal = new bootstrap.Modal(document.getElementById('addEducationModal'));
addEducationModal.show();
});
});
Although I have used event delegation for the “Add Education” button in script.js, the modal is still not being triggered.