Inline javascript with Spring Boot, Thymeleaf, Dandelion

2k Views Asked by ibhana At 26 July 2016 at 09:21

I want to replace this:

<body onload="
      $('input[name=startDate]').focus();
      $(function () { 
        $('#startDate').datepicker({ dateFormat: 'mm/dd/yy'});
      });
 ">

with inline javascript - something like:

<script th:inline="javascript">
/*<![CDATA[*/
    $( document ).ready(function() {
        $('input[name=startDate]').focus();
        $('#startDate').datepicker({ dateFormat: 'mm/dd/yy' });
    });
/*]]>*/
</script>

However, this doesn't work. The error is: ReferenceError: $ is not defined

Anyone knows how to get this to work?

Original Q&A

There are 3 best solutions below

user3145373 ツ On 26 July 2016 at 09:28

please add:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

before your script block.

$ is part of jQuery. You need to add it's library/implementation file for to use it.

AchillesVan On 26 July 2016 at 09:29

Have you done this :

Your controller class:

@Grab("org.webjars:jquery:2.1.1")
@Grab("thymeleaf-spring4")
@Controller
class MyApp{...}

Your html (tymeleaf)

    <head>
          <title>blablabla</title>
          <script src="webjars/jquery/2.1.1/jquery.min.js"></script>

 <script th:inline="javascript">
/*<![CDATA[*/
    $( document ).ready(function() {
        $('input[name=startDate]').focus();
        $('#startDate').datepicker({ dateFormat: 'mm/dd/yy' });
    });
/*]]>*/
</script>
            </head>

ibhana On 26 July 2016 at 10:20

Thanks to the hints above I was able to solve this as follows:

Add the appropriate dependency:

<dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>2.2.4</version>
        <scope>compile</scope>
</dependency>

Add a configuration hook:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        if (!registry.hasMappingForPattern("/webjars/**")) {
            registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
        }
    }
}

Finally, import the script correctly:

<script th:src="@{/webjars/jquery/2.2.4/jquery.min.js}"></script>

The jQuery ready function is then called correctly in the inline javascript.

Inline javascript with Spring Boot, Thymeleaf, Dandelion

There are 3 best solutions below

Related Questions in JQUERY

Related Questions in SPRING

Related Questions in SPRING-BOOT

Related Questions in THYMELEAF

Related Questions in DANDELION

Trending Questions

Popular # Hahtags

Popular Questions