英文:
how to handle a ModelAndView object with java script
问题
页面正常渲染，但与按钮绑定的功能停止工作，单击无响应。尝试将JavaScript从外部文件添加到HTML页面中也没有解决问题。这可能与事件监听器中断有关。您可以尝试重新加载JavaScript或刷新事件监听器来解决这个问题。
重新加载JavaScript或刷新事件监听器的方法取决于您的具体情况。您可以尝试以下方法：
- 在页面加载后重新执行JavaScript代码。您可以在HTML文档底部添加以下代码：
<script>
document.addEventListener('DOMContentLoaded', function() {
// 在这里重新执行您的JavaScript代码，包括事件监听器设置
// 例如，您可以再次添加事件监听器
});
</script>
- 如果您使用的JavaScript依赖于文档的特定元素，请确保在重新加载页面内容后重新设置事件监听器。这通常需要在渲染新内容后调用JavaScript函数来重新设置事件监听器。
请注意，具体的解决方法取决于您的JavaScript代码和HTML结构，您可能需要调试以找到问题的准确原因。
英文:
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/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/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?
答案1
得分: 0
我假设您从服务器获取了一些HTML代码作为字符串。您可以尝试使用iframe来嵌入这段代码。但首先，您需要在调用此URL的文档中创建一个带有iframe的HTML主体。
var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write(htmlContent);
doc.close();
英文:
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.
var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write(htmlContent);
doc.close();
答案2
得分: 0
我解决了这个问题。问题出在事件监听器在文档被重写时中断。我用从HTML文件调用的函数替换了事件监听器。
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论