CODEWITHSUNDEEP
jqueryspringspring-mvc
user2724215
user2724215

Reputation: 155

Issue with Spring MVC JQuery

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" />

Upvotes: 2

Views: 655

Answers (1)

andyb
andyb

Reputation: 43823

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.

Upvotes: 1

Related Questions