Why is java servlet displaying a blank page

Question

I've seen quite a few answers to my question but none fit my issue. The basic thing I am trying to do is this:

Display a web page with tabs.
One tab will have a form with many details. The second tab will display a result of some calculations based on user input in the form of a chart.
I don't want to save the user data to a DB, only store in memory until browser is closed.
The calculations are performed in a java class. The code for this already exists.

I am learning how to use intellijIDEA so have created a bare bones Hello World project just to learn how to pass data from user to java class doing the calculations and then display information on page. It is my first time learning java web applications using servlets and jsp. Here's what I have.

index.jsp is the home page. The user clicks on link which displays calculator.jsp
The calculator.jsp displays two tabs, one for mainform.jsp and the other for result.jsp
The user fills in the form data displayed in mainform.jsp
When the user clicks on the "result" tab then it goes into javascript file script.js
script.js displayResultContent calls submit() on the details-form element which is the ID of the form. It then makes the result div visible in the Result tab.
The form is linked to the servlet CalculateServlet. The doPost method is called which retrieves the form info and stores it in a java class called Person.
The javascript then calls process(). This javascript method calls the CalculateServlet GET.
The GET retrieves the details from the Calculator. In the real app this will be the result of the calculations to be displayed in the chart. But for my practice project it just returns the date of birth entered in the form.
javascript then retrieves the element by ID and sets the value to be displayed. The problem is when the result is displayed the CalculateServlet is displaying a blank page. How do I stop this? Or what am I doing wrong. The code is below. I know it's a lot but sure hope someone can help.

header.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    Header Title

footer.jsp

This is footer

index.jsp

<%@ include file = "header.jsp" %>

<%= "Hello World!" %>



Hello Servlet



<%@ include file = "footer.jsp" %>

calculator.jsp

<%@ include file = "header.jsp" %>


    
        
            Details
        
        
            Result
        
    



    
        
          <%@ include file ="mainform.jsp" %>
        
        
            <%@ include file ="result.jsp" %>
        
    



<%@ include file = "footer.jsp" %>

mainform.jsp


    

        
        
            
                Date of Birth
                
                    
                
            
        

        
        
            
                Current Super Balance
                
                    
                
            
        


        
            
                Job Category

result.jsp




    Date of brith

script.js

function process() {
    var ajaxRequest = new XMLHttpRequest();

    ajaxRequest.onreadystatechange = function(){

        if(ajaxRequest.readyState === 4){
            //the request is completed, now check its status
            if(ajaxRequest.status === 200){
                var resultArray = JSON.parse(ajaxRequest.response);
                var dobString = resultArray[0];
                document.getElementById("dob-label").innerHTML = dobString;
            }
            else{
                console.log("Status error: " + ajaxRequest.status);
            }
        }
        else{
            console.log("Ignored readyState: " + ajaxRequest.readyState);
        }
    }
    ajaxRequest.open('GET', 'CalculateServlet');
    ajaxRequest.send();
}

$(document).ready(function () {
    $('#details-tab').click(displayDetails);
    $('#result-tab').click(displayResultContent);
});

function displayDetails() {
    $('#details').show();
    $('#result').hide();
    $('#result-tab').removeClass('active');
    $('#details-tab').addClass('active');
}

function displayResultContent() {

    $('#details').hide();
    $('#result-tab').addClass('active');
    $('#details-tab').removeClass('active');
    document.getElementById("details-form").submit();
     $('#result').show();
     process();
}

style.css

html, body {
    height: 100%;
    margin: 0;
    overflow:hidden;
    background-color: antiquewhite;
}

.footer {
    display: block;
    width: 100%;
    background-color: lightgrey;
    height: 50px;
    margin-top: 20px;
}

.form-container {
    background-color: #FFF;
    width: 70%;
    height: 70%;
    margin: 0 auto;
    padding: 10px;
}

.column-left {
    margin-top: 10px;
    margin-left: 25%;
}

.column-right {
    margin-right: 3%;
    margin-top: 10px;
}

.form-label {
    width: 200px;
    height: 40px;
    background-color: grey;
    color: #FFF;
    display:block;
}

#result {
    margin-top: 40px;
    display: none;
}

.page {
    width: 70%;
    margin: 0 auto;
    margin-top: 20px;
    border: 2px solid #000;
    padding: 5px;
}

/*******************************************************************/
/*             NAV TABS                                            */
/******************************************************************/
nav ul {
    margin: 0;
    padding: 0;
}

.nav-link {
    border-radius: 15px 15px 0px 0px !important;
    text-decoration: none;
    height: 40px;
    font-size: 80%;
}

.nav-link:active,
.nav-link:hover,
.nav-link:focus {
    border-radius: 15px 15px 0px 0px !important;
}


/*******************************************************************/
/*             NAV TABS                                            */
/******************************************************************/
#tabs {
    border-bottom: 7px solid #FE6D73;
}
/* This is the actual tab */
.nav-link {
    background-color: #eeeeee !important;
    color: #aaaaaa;
    width: 200px;
}



.nav-link:hover,
.nav-link:focus {
    background-color: #FE6D73 !important;
    color: #FEF9EF !important;
}

.nav-link.active {
    background-color: #FE6D73 !important;
    color: #FEF9EF !important;
}

.nav-item {
    display: inline;
}

.nav-tabs>li>ul {
    background-color: #FE6D73 !important;
}

/* Remove border from tabs */
.nav-tabs .nav-link {
    border: 0px solid transparent;
}


li {
    list-style: none;
}
#tabs {
    width: 70%;
    margin: 0 auto;
    padding: 0;
}

Why is java servlet displaying a blank page

0 Answers