i have a controller that returns a ModelAndView, this controller is called with this script:
document.getElementById('history-equipment').addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default anchor tag behavior (e.g., navigating to a new page)
const url = '/View/Student/History'; // Replace with your API endpoint URL
var token = localStorage.getItem("token");
// Request headers
const headers = {
'Content-Type': 'application/json',
'Authorization': token.valueOf() // Replace with your actual access token
};
// Request options
const requestOptions = {
method: 'GET', // Replace with the HTTP method you want to use (e.g., GET, POST, PUT, DELETE)
headers: headers
};
// Send the request
fetch(url, requestOptions)
.then(response => response.text()) // Use response.text() instead of response.json() to get the HTML content
.then(data => {
// Handle the response data
console.log(data);
// Render the returned model and view
renderModelAndView(data);
})
.catch(error => {
// Handle any errors
console.error('Error:', error);
});
});
function renderModelAndView(htmlContent) {
// Replace the entire HTML page with the received content
document.open();
document.write(htmlContent);
document.close();
}
and this the html template i want to render:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- icons link-->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- custom css link-->
<link rel="stylesheet" href="../../static/css/style.css">
<title>Request Equipment</title>
</head>
<body>
<!-- SIDEBAR -->
<section id="sidebar">
<a href="#" class="logo"><img src="../../static/css/images/logo.png" class="logo-pic"> Smart EMS</a>
<ul class="side-menu">
<li><a href="" ><i class='bx bx-devices icon'></i> Allocation History</a></li>
<li><a href="/View/Student/Request" ><i class='bx bx-devices icon'></i> Request Equipment </a></li>
</ul>
</section>
<!-- NAVBAR -->
<section id="content">
<nav>
<i class='bx bx-menu toggle-sidebar' ></i>
<form action="#"></form>
<div id="toggle-btn" class="fas fa-sun"></div>
<div class="notif">
<i class="bi bi-bell-fill nav icon" id="bell"></i>
<ul class="notif-link">
<li><a href="#" ><i class="bi bi-bell-fill icon "style="color: green;"></i>check</a></li>
<hr>
<li><a href="#"><i class="bi bi-bell-fill icon" style="color: green;"></i>check</a></li>
<hr>
<li><a href="#"><i class="bi bi-bell-fill icon" style="color: green;"></i>check</a></li>
</ul>
</div>
<span class="divider"></span>
<div class="profile">
<img src="../../static/css/images/student.png" alt="">
<ul class="profile-link">
<li><a href="Student-ManageMyAccount.html" ><i class="bi bi-person-circle icon"></i>Update info</a></li>
<li><a href="../Login%20&%20Sign-up.html"><i class="bi bi-box-arrow-in-left"></i> Logout</a></li>
</ul>
</div>
</nav>
<!-- MAIN -->
<main>
<h1 class="title">Request Equipment</h1>
<ul class="snippet">
<li><a href="#">Home</a></li>
<li class="divider">/</li>
<li><a href="#" class="active"> Request Equipment </a></li></ul>
<div class="data">
<div class="content-data">
<!-- data table -->
<div class="head">
<h3>Equipment Details</h3>
</div>
<div class="table-wrapper">
<table class="fl-table">
<thead>
<tr>
<th>Item ID</th>
<th>Serial number</th>
<th>Type</th>
<th>Description</th>
<th>State</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>#</td>
<td>#</td>
<td>Content 1</td>
<td>Content 1</td>
<td>Content 1</td>
<td>
<a href="Student-SendRequestEquipment.html" class="table-button1">Request</a>
</td>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>Content 2</td>
<td>Content 2</td>
<td>Content 2</td>
<td>
<a href="Student-SendRequestEquipment.html" class="table-button1">Request</a>
</td>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>Content 3</td>
<td>Content 3</td>
<td>Content 3</td>
<td>
<a href="Student-SendRequestEquipment.html" class="table-button1">Request</a>
</td>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>Content 4</td>
<td>Content 4</td>
<td>Content 4</td>
<td>
<a href="Student-SendRequestEquipment.html" class="table-button1">Request</a>
</td>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>
<a href="Student-SendRequestEquipment.html" class="table-button1">Request</a>
</td>
</tr>
</tbody>
<tbody>
</table>
</div>
</div>
</div>
</main>
</section>
<!--custom js link-->
<script src="../../static/js/script.js"></script>
<script src="../../static/js/script2.js"></script>
</body>
</html>
the page is rendered normally, but the functions tied to the buttons stop working, i click and nothing happens. i tried taking the Js from an external file and adding it to the html page itself and that didn’t work. i assume it has something to do with eventListeners breaking. So is there anyway way to load the javaScript or refresh the eventListeners?
2
Answers
i fixed the problem. it was an issue of eventListeners breaking when the document is rewritten. i replaced the eventListeners with functions that i call from the html file
I assume you are getting some html code as a string from server. you can try using iframe to embed this code. but first you need to create an html body with iframe in in the document from which you are calling this url.