I am developing a web application where the layout remains consistent, except for one specific <div>. Currently, I am using routes to handle links, but it feels inefficient to reload the entire layout.ejs file when only the <div> needs to be updated.
What changes should I make in my layout.ejs file? Here is the current content:
<!DOCTYPE html>
<html lan="en">
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script src="/javascripts/chat.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="chat">
<input type="text" id="text-input">
<input type="button" value="Send" id="send-button">
</div>
<div id="content">
<%- body %>
</div>
<div id="rooms">
</div>
<div id="footer">
<div id="footer_links">
<a href="/">Home</a> | <a href="/about">About</a> | <a href="/contact">Contact</a>
</div>
</div>
</div>
</body>
</html>
I have been considering utilizing AJAX for this purpose, but I have also heard about the benefits of using partial views. Setting this up seems daunting, especially with the possibility of incorporating WebSockets instead of AJAX. Can anyone provide guidance on how to proceed with this setup?
I apologize if this question seems rudimentary. I am struggling with understanding the documentation on this topic.
Thank you!