Issue with Spring MVC JQuery

Question

I am trying to run the Spring MVC with Jquery, but i am getting some weird problem. Whenever the application started it will go to the add user page. It is used to add the user, while that time jquery is not loading. I have a link in the add user page to the show user page, if i click the show user page and then come back to the add user page using back button in eclipse browser. Then jquery is working fine. Can any one please why it is not working in the first time and then it is working after the visiting the show user page? And then it is not working in any of the browser giving jquery 404 exception, inside eclipse only it is working. I have provided the code below. Thanks in advance.

package com.raistudies.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.raistudies.domain.User;

@Controller
public class UserListController {

    private List<User> userList = new ArrayList<User>();

    @RequestMapping(value="/AddUser.htm", method = RequestMethod.GET)
    public String showForm() {
        return "AddUser";
    }

    @RequestMapping(value = "/AddUser.htm", method = RequestMethod.POST)
    public @ResponseBody
    String addUser(@ModelAttribute(value = "user") User user,
            BindingResult result) {
        System.out.println(" add user controller...");
        String str = "";

        System.out.println(" User " + user.getName());
        System.out.println(" User " + user.getEducation());
        if (!result.hasErrors()) {
            userList.add(user);
            str = "User has been added to the list, total number of users are "
                    + userList.size();
        } else {
            str = "Sorry, an error has occur. User has not been added to list." + result.getAllErrors();
        }
        System.out.println(" add user controller ends...");
        return str;
    }

    @RequestMapping(value = "/showUsers.htm")
    public String showUsers(ModelMap model) {
        model.addAttribute("Users", userList);
        return "ShowUsers";
    }
}


package com.raistudies.domain;

public class User {

    private String name;
    private String education;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEducation() {
        return education;
    }

    public void setEducation(String education) {
        this.education = education;
    }
}


under the WebContent i have a folder js - inside that i have jquery.js file.

under the WebContent i have WEB-INF folder, it has jsp and lib folder. 

under jsp folder


AddUser.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<html>
<head>
<title>Add Users using ajax</title>
<script src="/AjaxWithSpringMVC2Annotation/js/jquery.js"></script>
<script type="text/javascript">
    function doAjaxPost() {
        // get the form values
        alert('doAjaxPost');
        var name = $('#name').val();
        alert('name');
        var education = $('#education').val();

        $.ajax({
            type : "POST",
            url : "/AjaxWithSpringMVC2Annotation/AddUser.htm",
            data : "name=" + name + "&education=" + education,
            success : function(response) {
                // we have the response
                $('#info').html(response);
                $('#name').val('');
                $('#education').val('');
            },
            error : function(e) {
                alert('Error: ' + e);
            }
        });
    }
</script>
</head>
<body>
    <h1>Add Users using Ajax ........</h1>
    <table>
        <tr>
            <td>Enter your name :</td>
            <td><input type="text" id="name" name="name"><br /></td>
        </tr>
        <tr>
            <td>Education :</td>
            <td><input type="text" id="education"><br /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" value="Add Users"
                onclick="doAjaxPost()"><br /></td>
        </tr>
        <tr>
            <td colspan="2"><div id="info" style="color: green;"></div></td>
        </tr>
    </table>
    <a href="/AjaxWithSpringMVC2Annotation/showUsers.htm">Show All
        Users</a>
</body>
</html>

ShowUser.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Users Added using Ajax</title>
</head>
<body style="color: green;">
    The following are the users added in the list :
    <br>
    <ul>
        <c:forEach items="${Users}" var="user">
            <li>Name: <c:out value="${user.name}" />; Education: <c:out
                    value="${user.education}" /></li>
        </c:forEach>
    </ul>
</body>
</html>

under WEB-INF 
app-config.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:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
                           http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
                           http://www.springframework.org/schema/context
                           http://www.springframework.org/schema/context/spring-context-3.0.xsd
                           http://www.springframework.org/schema/mvc
                           http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

    <context:component-scan base-package="com.raistudies" />

    <mvc:annotation-driven />

    <!-- <mvc:resources location="/, classpath:/META-INF/web-resources/"
        mapping="/resources/**" />

    <mvc:resources mapping="/resources/**" location="/public-resources/" />
 -->
    <!-- <mvc:resources mapping="/js/**" location="/js/"/> -->

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

web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    id="WebApp_ID" version="3.0">
    <display-name>AjaxWithSpringMVC2Annotation</display-name>

    <servlet>
        <servlet-name>SpringMVCDispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/app-config.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>SpringMVCDispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

under WEB-CONTENT
index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<jsp:forward page="/AddUser.htm" />

When you say jquery is working fine, are you saying you can add users after using the back button? — andyb
– andyb, Commented Jan 13, 2014 at 10:41
Sounds like Eclipse has cached it somehow. Using Maven command line instead of Eclipse I cannot get the AddUser page to ever work as jquery.js is never found. I have to change the webapp configuration to make it work. I can't see how visiting another page and then returning makes a path suddenly work. — andyb
– andyb, Commented Jan 13, 2014 at 11:52

Community · Accepted Answer · 2017-05-23 12:19:20Z

1

I could not duplicate the scenario you describe. The jquery.js file is never found in my local setup. I cannot see how changing pages magically makes a file become routeable since the Spring config you are using does not expose the static resources.

If you are using Tomcat or Jetty (or possibly other web containers), then there is a "default" servlet which can be used to route static resources to - see How to access static resources when mapping a global front controller servlet on /*

Adding the following to web.xml

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>/js/*</url-pattern>
</servlet-mapping>

allowed the jquery.js to be found.

Or uncommenting this line in app-config.xml

<mvc:resources mapping="/js/**" location="js/"/>

which uses Spring to expose resources via the ResourceHttpRequestHandler - see Configuring Serving of Resources.

Either of these solved the 404 for me.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Jan 14, 2014 at 9:15

andyb

43.9k12 gold badges126 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with Spring MVC JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related