How to include page dynamically in JSP page?

In this example we are going to learn how to use <jsp:include> action. This action can be use to include resource dynamically to our JSP pages. For example the resource can be another JSP page, a servlet or event a static html pages. But to make it enable to be processed as a JSP page, such as accepting parameters, we must use the .jsp as the file extension. If we use other extension such as .jspf, it will processed as a static page.

The other things to note is that using the <jsp:include> action will process the page inclusion at the request time. This is why we can pass parameters to the included page using the <jsp:param>. The value can be read by obtaining the parameter from the request object or using expression language variable param.

But if we use the <%@ include %> directive the inclusion of the page happen when it translated into a Servlet. See the following example about the <%@ include %> directive: How do I include a page fragment into JSP?

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Include Demo</title>
</head>
<body>

Lorem Ipsum

<jsp:include page="jspf/footer.jsp">
    <jsp:param name="year" value="2014"/>
</jsp:include>

</body>
</html>

Below is the content of our footer.jsp page. In this page we display the footer information with a parameter read from the request object.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<hr/>
Copyright © ${param["year"]} Kodejava.org. All rights reserved.

This example will give you the following result in the browser:

JSP Include Action

JSP Include Action

How do I include other pages using jsp:include?

The <jsp:include/> tag is use to include another page fragment of a JSP page into another page. This is useful when you have a common page such as header, footer or a menu that applied to many of all of your pages.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>&lt;jsp:include/&gt; Demo</title>
</head>
<body>
<div id="header">
    <jsp:include page="common/header.jsp"/>
</div>

<div id="main">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.
</div>

<div id="footer">
    <jsp:include page="common/footer.jsp"/>
</div>
</body>
</html>

Here are the page fragment of the header.jsp, footer.jsp and menu.jsp. All of them are placed in the common folder in the same location with the index.jsp file.

header.jsp

<strong>&lt;jsp:include/&gt; Demo</strong>
<hr/>
<jsp:include page="menu.jsp"/>

footer.jsp

<hr/>
&copy; 2009 Kode Java Org.

menu.jsp

<a href="/ex01/index.jsp">HOME</a>

When you access your page from the servlet container such as Apache Tomcat you’ll have a complete display of a page that contains header, menu, content and footer.

How do I include a page fragment into JSP?

In this example you can learn how to include a JSP fragment into another JSP page. This is a common practice when creating a web application where we usually have a navigation section, the main content and the footer of a web page. Using the include directive make it simpler to maintain the fragment of a web page, which mean that when we need to change for example the footer section we just need to alter the footer include file and all the page that includes it will get the benefit.

The page inclusion that using the include direction will occurs at page translation time, it is when the JSP page is translated into a Servlet by JSP container. We can use any file extension name for the JSP fragment used by the include directive. In this example we use the .jspf extension which is short for JSP Fragment.

Here is an example of JSP with include directive.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Include Directive</title>
</head>
<body>

<div id="header">
    <%@ include file="/include/common/header.jspf" %>
</div>

<div id="content">
    Main application content goes here!
</div>

<div id="footer">
    <%@ include file="/include/common/footer.jspf" %>
</div>

</body>
</html>
Header
<hr/>
<hr/>
Footer

And here is the page that you will get:

JSP Include Directive

JSP Include Directive