Search code examples
javascriptjavajquery-ui-tabs

jquery tab page not found

I have 3 jquery tabs. When I click Home tab, firefox console says "GET http://localhost:8080/MedAI/jsp/homeTab.jsp [404 Not Found]".
Why? Here is code snippet from index.jsp

<div id="tabs">
<ul>
    <li><a href="jsp/homeTab.jsp">Home</a></li>
    <li><a href="<c:url value='jsp/geneNetworkTab' />">Gene Network</a></li>
    <li><a href="<c:url value='jsp/diseaseNetworkTab' />">Disease Network</a></li>
</ul>  
</div>
    <script type="text/javascript">
        $(document).ready(function() {
        $('#tabs')
            .tabs()
        });    
    </script>

My homeTab.jsp exists in NetBeans project at MedAI/WebPages/Web-INF/jsp/homeTab.jsp. It just displays "hello world".

I tried it with jstl method and straight url method, both with and without the .jsp extension. Nothing works. Why won't it find it?

dispatcher-servlet.xml

<?xml version='1.0' encoding='UTF-8' ?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
       http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd
       http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd">

    <bean class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping"/>

    <!--
    Most controllers will use the ControllerClassNameHandlerMapping above, but
    for the index controller we are using ParameterizableViewController, so we must
    define an explicit mapping for it.
    -->
    <bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
        <property name="mappings">
            <props>
                <prop key="index.htm">indexController</prop>
            </props>
        </property>
    </bean>

    <bean id="viewResolver"
          class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          p:prefix="/WEB-INF/jsp/"
          p:suffix=".jsp" />

    <!--
    The index controller.
    -->
    <bean name="indexController"
          class="org.springframework.web.servlet.mvc.ParameterizableViewController"
          p:viewName="index" />

</beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/applicationContext.xml</param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>2</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>*.htm</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>redirect.jsp</welcome-file>
    </welcome-file-list>
</web-app>
Solution

  • It took me days of research and trial and error but I finally got it. I HATE SPRING! It is the most confusing non-intuitive framework I have ever worked with.

    Here is my NetBeans project structure:

    enter image description here

    web.xml

    <?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/applicationContext.xml</param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>2</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>*.htm</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

    I fooled around with the url-pattern trying to get simply "/" to work, but couldn't. Kept getting the 404 not found error.

    Notice that index.jsp is the only jsp outside of WEB-INF. That is the landing spot when you enter "http://localhost:8084/MedAI/" in the browser.

    It lands there because of the 

    <welcome-file>index.jsp</welcome-file>

    dispatcher-servlet.xml

    <?xml version='1.0' encoding='UTF-8' ?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
       http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd
       http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
       http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">
    <bean class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping"/>
    <context:annotation-config />
    <context:component-scan base-package="com.tekknow.medai" />
    <mvc:annotation-driven />

    <bean id="viewResolver"
          class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          p:prefix="/WEB-INF/jsp/"
          p:suffix=".jsp" />
</beans>

    Any url ending with *.htm gets sent to the dispatcher-servlet because of the web.xml url-pattern. The viewResolver bean then says to go look for the name (minus the .htm extension and plus the .jsp extension) in the WEB-INF/jsp folder.

    index.jsp

    <%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>MedAI - Medical Artifical Intelligence</title>
        <script type="text/javascript" src="resources/js/jquery.js"></script>     
        <script type="text/javascript" src="resources/js/jquery-ui.js"></script>  
</script>        
        <link href="resources/css/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/medai.css" rel="stylesheet"  type="text/css" />
    </head>
    <body>
    <div class="header">
        <h1>MedAI</h1>
        <span class="version">V 1.0.0</span>            
    </div>

    <div id="tabs">
    <ul>
        <li><a href="home.htm">Home</a></li>
        <li><a href="GeneNetwork.htm">Gene Network</a></li>
        <li><a href="DiseaseNetwork.htm">Disease Network</a></li>
    </ul>  
    </div>
        <script type="text/javascript">
            $(document).ready(function() {
            $('#tabs')
                .tabs()
            });    
        </script>    
    </body>
</html>

    Notice the url's end with .htm. As I said earlier, I tried without the .htm and using a "/" in the web.xml url-pattern but it wouldn't work.

    home.htm, GeneNetwork.htm, and DiseaseNetwork.htm each have their own controller similar to this:

    HomeController.java

    package com.tekknow.medai.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("/home.htm")
public class HomeController {

    @RequestMapping(method = RequestMethod.GET)
    public String handleRequest(ModelMap modelMap) {
        System.out.println("HomeController.handleRequest");
        return "home";
    }
}

    This sends it to the home.jsp view.

    home.jsp

    <%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
    </head>
    <body>
        <h1>MedAI Home</h1>
    </body>
</html>

    Then FINALLY after dozens of hours... enter image description here

    Hopefully this will save all of you those many wasted hours!