CODEWITHSUNDEEP
javascriptjspservlets
xeko
xeko

Reputation: 67

What I should do to load a JSP page in a <div> tag in another JSP page through a Servlet?

Here is the problem, i have 3 JSP pages (main.jsp, manageClasses.jsp and insertDates.jsp) and 2 Servlets (AttendanceServlet and ManageClassServlet). The main page loads the other ones inside itself.

Basically what i want to do is upon calling the AttendanceServlet i want to load insertDates.jsp into main.jsp. Replacing the previous content which was loaded by ManageClassServlet.

main.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
        <link rel="stylesheet" href="css/stylesheetprincipal.css">
        <script type="text/javascript">  
            $(document).ready(function() {
            $("#gt").click(function(){
                $("#internal").load('ManageClassServlet');
            });
        });
        </script>
        <title>Main</title>
    </head>
    <body>
        <div id="nav">
            <ul>
                <li><a href="javascript:void(0)" id="gt" title="manage">MANAGE     CLASSES</a></li>  
                <li><a href="logout.jsp" title="exit">EXIT</a></li>
            </ul>
        </div>    
        <div id="forms">
            <div id="internal">
            </div>
        </div>
    </body>
</html>

ManageClassServlet

@WebServlet(name = "ManageClassServlet", urlPatterns = {"/ManageClassServlet"})
public class ManageClassServlet extends HttpServlet {

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        HttpSession session = request.getSession();
        String[][] tableMatrix = getTableMatrix(professorClasses);
        session.setAttribute("tableMatrix", tableMatrix);
        response.sendRedirect("manageClasses.jsp");
    }
}

manageClasses.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Manage Classes</title>
    </head>
    <body>
        <form action="AttendanceServlet" method="post">
            <table id="classTable" border="2">
                <TR> <TH>&nbsp;</TH> <TH>Subject</TH>  <TH>Year/Semester</TH>  <TH>Frequencias</TH> </TR>
                <c:forEach items="${matrixTable}" var="row" varStatus="i">
                    <tr>
                        <TH>${row[0]}</TH>
                        <c:forEach begin="1" end="2" items="${row}" var="value">
                            <td>${value}</td>
                        </c:forEach>
                        <td> <button type="submit" name="Ver" value="${row[3]}">See    </button> </td>
                    </tr>
                </c:forEach>
            </table>
        </form>
    </body>
</html>

I was trying to use the out Object to send the jsp page but it didnt work.

AttendanceServlet

@WebServlet(name = "AttendanceServlet", urlPatterns = {"/AttendanceServlet"})
public class AttendanceServlet extends HttpServlet {

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        try {
            ClassDAO classDao = new ClassDAO();
            Integer idClass = Integer.parseInt(request.getParameter("See"));
            ClassBean class = classDao.searchClassBean(idClass);
            if (class.getDateClasses() == null) {
                String path = "/WEB-INF/jsp/main.jsp";
                PrintWriter out = response.getWriter();
                out.println("<script type=\"text/javascript\">");
                out.println("$(document).ready(function() {");
                out.println("$(\"#internal\").load('insertDates.jsp');");
                out.println("});");
                out.println("</script>");
                RequestDispatcher dispatcher = request.getRequestDispatcher(path);
                dispatcher.include(request, response);
            }
        } catch (SQLException ex) {
            ex.printStackTrace();
        }
    }
}

Upvotes: 2

Views: 7396

Answers (2)

Dave Newton
Dave Newton

Reputation: 160181

Normally you'd do this through an Ajax form submit--same way you load the form, but via a submit. (Generally a $.post.)

The AttendanceServlet servlet would forward to the insertDates.jsp as normal, the Ajax submit's success handler would update the #internal div with the results of the Ajax submit.

It's not clear to me why you moved away from normal jQuery mechanisms once it came to submitting the form. Perhaps I'm missing something, but I can't really tell what you were trying to do.

Upvotes: 0

BalusC
BalusC

Reputation: 1108672

It took a while before I could wrap my head around the odd way of loading, redirecting and dispatching the (sub)views in this particular example. It's hard to pinpoint the root cause of your problem. At least, it's clear that you're going pretty overboard with jQuery. To start, if the client has JS disabled, then your main page is already entirely useless.

To achieve whatever you want, you first have to separate client side responsibilities from the server side responsibilities. Put jQuery out of your head for a while and get it to work with normal <form> and/or <a> elements and <jsp:include> first. If you keep all Java code in Servlet class and keep all HTML/CSS (and any future JS) in the JSP file, then the code will almost write itself.

Finally, once you get it all 100% to work without any line of jQuery/JS code, then you can progressively enhance the client side experience by adding jQuery in an unobtrusive manner. I.e. the server side functionality (as you have in servlet and JSP) must not be changed (apart from eventually checking if it's a normal or an ajax request so that a more suitable response can be given). The jQuery has just to add event handlers during document load and change the document behaviour in such way that it improves the user experience (again, without changing the server side code). jQuery isn't a MVC framework at its own or something. And no, you should not let the servlet emit any jQuery code. This makes no sense.

Again, sorry if I don't have a ready-to-fit answer for this, but you hopefully understand now that I am simply unable to do so. Kudos for clean code style and a good startoff with Servlet/JSP though. I'd only lowercase those <TH><TR> elements.

Upvotes: 1

Related Questions