skip to Main Content

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


  1. Chosen as BEST ANSWER

    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


  2. 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();
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search