How to reset values on each page view

Question

I have a basic app in SpringMVC. All of my controllers extend a super class shown below. The problem here is that the cssFiles and jsFiles are not reset every time a controller method is touched. So I end up with content/view.js being loaded x+1 times for every page view. If I've loaded the page 3 times, it'll contain 4x content/view.js files.

I'm seeing these values be appended to each time the page is loaded. Why is this happening and how do I fix it?

public class Controller {
    private List<String> cssFiles = new ArrayList<String>();
    private List<String> jsFiles = new ArrayList<String>();

    public Controller () {
        this.addCss("global");

        this.addJs("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min");
        this.includejQueryUI();
        this.addJs("global");
    }

    public ModelAndView prepareModel (ModelAndView model) {

        model.addObject("cssFiles", cssFiles);
        model.addObject("jsFiles", jsFiles);

        return model;
    }
    public ModelAndView prepareModel (ModelAndView model, String title) {
        model.addObject("title", title);

        return prepareModel(model);
    }

    /*
     * Add a css file to the page
     */
    public void addCss (String cssPath) {
        if (cssPath.indexOf("://") < 1) {
            cssPath = "/cmt/css/"+cssPath;
        }

        cssFiles.add(cssFiles.size(), cssPath);
    }

    /*
     * Add a javascript file to the page
     */
    public void addJs (String jsPath) {
        if (jsPath.indexOf("://") < 1) {
            jsPath = "/cmt/js/"+jsPath;
        }

        jsFiles.add(jsFiles.size(), jsPath);
    }

    /**
     * Add a Rich Text Editor (TinyMCE) library to the page
     */
    public void includeRichTextEditor() {
        addJs("../lib/tiny_mce-3.5b3/tiny_mce");
    }

    /**
     * Add the jQuery UI library to the page
     */
    public void includejQueryUI() {
        addCss("../lib/jquery-ui-1.8.19/custom-theme/jquery-ui-1.8.19.custom");
        addJs("../lib/jquery-ui-1.8.19/jquery-ui-1.8.19.custom.min");
    }
}

I'm still struggling to determine the cause of this issue.... any ideas?

Part of web.xml

<!-- Standard spring configuration -->
<listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>

<context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>/WEB-INF/applicationContext*.xml</param-value>
</context-param>

<!-- Spring Web MVC dispatcher servlet -->
<servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>*.html</url-pattern>
    <url-pattern>*.json</url-pattern>
</servlet-mapping>

Answer 1

I think the way you are adding the js and css files to your views are wrong.

You should add the resource handlers for the css and js files in the the servlet xml configuration file. I use the following code for the same.

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

This will skip the Spring's Dispathcer Servlet for the all the resources in the resources folder of your web application root.

After doing this you just needs to include them in your jsp files wherever you need them.

Cheeers...

Answer 2

Try to use Set instead of ArrayList.

private Set<String> cssFiles = new HashSet<String>();
private Set<String> jsFiles = new HashSet<String>();

A collection that contains no duplicate elements. More formally, sets contain no pair of elements e1 and e2 such that e1.equals(e2), and at most one null element. As implied by its name, this interface models the mathematical set abstraction.

Answer 3

Maybe you want to do

cssFiles = new ArrayList<String>();
jsFiles = new ArrayList<String>();

in the constructor if the parent controller is always alive?

How are you invoking the parent constructor's methods?

Answer 4

try to use Set instead of ArrayList.

Answer 5

Although I didn't test this code, the obvious thing what I'd try is :

public class Controller {
    private List<String> cssFiles;
    private List<String> jsFiles;
.......
 public Controller () {
        cssFiles = new ArrayList<String>();
        jsFiles = new ArrayList<String>();
        this.addCss("global");
        this.addJs("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min");
        this.includejQueryUI();
        this.addJs("global");
    }

Can you ellaborate what you mean by reset in are not reset every time a controller method is touched

I've misunderstood your question at first here is revised version :

<html>
<head>
<!--Above content is header-->
<!--Specific CSS for edit.jsp here-->
<!--Or if you want to override css classes inside <style></style>-->
</head>
<body>
<!--Load specific edit.jsp javascript at the end of the body tag-->
<!--Below content is footer-->
</body>
</html>

If you need to override some javascript then put the edit.jsp specific js after the html tag. So your edit file would look like this :

<%@include file="header.jsp" %>
</head>
<body>
<!--some edit.jsp content -->
<%@include file="footer.jsp" %>