JQuery not loading CSS, js

Question

I have couple of issues with my jsp.

Javascript and CSS dont get loaded using relative path

   <head>
   <link rel="stylesheet" href="../css/bootstrap.min.css"/>
   <link rel="stylesheet" href="../css/mywebapp.css"/>      
   <script src="../js/jquery-2.2.4.min.js"  type="text/javascript"></script>
   <script src="../js/bootstrap.min.js"  type="text/javascript"></script>
   <script> $(document).ready(function(){
ajaxdGetStats();
setInterval("ajaxdGetStats()",10000);
}); </script>

Using the F12 I could figure out that the request for css and js goes to /css/bootstrap.min.css and /js/jquery-2.2.4.min.js whereas it should go to /mywebapp/css/bootstrap.min.css and /mywebapp/js/jquery-2.2.4.min.js

The $(document).ready(function(){...}); throws an error below.

The value of the property '$' is null or undefined, not a Function object

My web directory structure is as below - enter image description here

I am using Spring MVC and below is my web.xml servlet configuration

<servlet>
    <servlet-name>mvc-dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextClass</param-name>
        <param-value>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

and mvc-dispatcher-servlet.xml

    <mvc:annotation-driven />       
<bean id="viewResolver"
    class="org.springframework.web.servlet.view.InternalResourceViewResolver" >
    <property name="prefix">
        <value>/jsp/</value>
    </property>
    <property name="suffix">
        <value>.jsp</value>
    </property>
</bean>

<!-- resources exclusions from servlet mapping -->
<!-- <mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/images/**" location="/images/" />
<mvc:resources mapping="/js/**" location="/js/" /> -->

Try going two directories up ``. – StaticBeagle Jun 15 '16 at 14:28 — StaticBeagle, Jun 15 '16 at 14:28
Thanks @RedHat, but going two directories up didn't work. – bipin Jun 16 '16 at 07:49 — bipin, Jun 16 '16 at 07:49

score 0 · Answer 1 · answered Jun 15 '16 at 14:25

0

It appears the path is wrong. Probably in the following lines:

<script src="../js/jquery-2.2.4.min.js"  type="text/javascript"></script>
<script src="../js/bootstrap.min.js"  type="text/javascript"></script>

answered Jun 15 '16 at 14:25

CarlosCarucce

3,420
1
28
51

have doubled checked the paths and the filenames. Everything is correct. Infact, I am able to load these files into the browser with the http://:/myapp/js/bootstrap.min.js and http://:/myapp/js/jquery-2.2.4.min.js – bipin Jun 16 '16 at 07:53
@bipin _property '$' is null or undefined_ appears when the file is not included or the content is incorrect. If I were you, I would check again. Just a tip: if you are usng chrome or firefox, you can check the included files content in the browser console (F12 > Resources in chrome) – CarlosCarucce Jun 16 '16 at 11:36

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

Thanks Carlos for your help. A couple of things worked, 1. The browser was caching the previous compiled jsps, I had to clear the cache and 'touch' the jsps to force the browser to refresh the cache. This way it picked up the new path. 2. For IE10, I had to include the tag in the jsp. More info on the X-UA-Compatible tag is here

edited May 23 '17 at 11:52

Community

1
1

answered Jun 20 '16 at 12:53

bipin

13
2

JQuery not loading CSS, js

2 Answers2