jQuery Datepicker showing without styling

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

jQuery Datepicker showing without styling

arnaldop
My application uses the following:

* Spring Boot (MVC, Security, Tomcat 8)
* Hibernate Validator
* Thymeleaf
* Dandelion Core and Datatables

When I click on a jQuery Datepicker field, the datepicker shows without styling, blending into the page.

Looking at the page source, it seems that there is no jQuery UI theme being loaded. The only way to specify a theme is in the datatables.properties file, which doesn't apply to this page.

I thought about creating my own bundle and having the jQuery theme load that way, but I was trying to figure out if there was some way of doing it utilizing the vendor bundles.

I am relying on the dandelion.properties file property bundle.includes to load jquery, jqueryui and bootstrap3.

The application can be found at https://github.com/arnaldop/enhanced-pet-clinic.

Please advise.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jQuery Datepicker showing without styling

Thibault Duchateau
Administrator
Hi again,

I just took a look at https://github.com/arnaldop/enhanced-pet-clinic.

First of all, note that the Dandelion configuration file (dandelion.properties) must locate under the src/main/resources/dandelion folder. Once fixed, you should see all bundles loaded. Remember that you can use the bundle graph viewer anywhere in the application to see what bundle/assets are to be injected by Dandelion.

Moreover, keep in mind that the bundle.includes property is used to activate one or more bundles permanently, i.e. to include these bundles in all requests of your application.

If you need to include one or more bundles in a specific page, you should use the Thymeleaf dialect  instead.

For example, if you need a datepicker in some pages, you could:
1) prepare the "datepicker" bundle, with the required dependencies and assets.
For example:
{
   "bundle" : "datepicker",
   "dependencies" : [ "jqueryui" ],
   "assets": [{
      "name": "jqueryui-datepicker",
      "version": "1.10.3",
      "type": "js",
      "locations": {
          "webjar": "jquery.ui.datepicker.js"
      }
   }, {
      "name": "pets",
      "version": "1.0.0",	
      "type": "js",
      "locations": {
          "webapp": "/assets/js/datepicker-init.js" <= the script that initializes the datepicker
      }
   }]
}

In the above bundle, the "jqueryui" bundle is brought by Dandelion-Datatables as a vendor bundle. But you can actually prepare some custom vendor bundles too, by putting them under the src/main/resources/dandelion/vendor folder. See the bundle loader section of the docs.

2) include this bundle everywhere you need to display a datepicker
For example:

<html xmlns:th="http://www.thymeleaf.org" 
      xmlns:ddl="http://www.thymeleaf.org/dandelion"
      ddl:bundle-include="datepicker">
   ...
</html>

or

<div ddl:bundle-includes="datepicker">
   <!-- The datepicker needs to be displayed in this div -->
</div>

Hope this helps!
Feel free to ask for more help if needed.

Regards,
Thibault.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jQuery Datepicker showing without styling

arnaldop
Thibault,

That was perfect. I am now only adding jQuery UI and the theme when I need a datepicker.

I create a bundle called jquery-ui-overcast.json that looks like this:

{
    "bundle" : "jquery-ui-overcast",
    "assets": [
        {
            "name": "jquery-ui",
            "version": "1.11.0",
            "type": "js",
            "locations": {
                "cdn": "/webjars/jquery-ui/1.11.0/jquery-ui.min.js"
            }
        },
        {
            "name": "overcast",
            "version": "1.10.3",
            "type": "css",
            "locations": {
                "webapp": "/webjars/jquery-ui-themes/1.10.3/overcast/jquery-ui.min.css"
            }
        }
    ]
}

When I need it, I do this:

<div class="controls" ddl:bundle-includes="jquery-ui-overcast">
    <input type="text" th:field="*{date}" id="date" />
    [date error]
</div>

Thanks again!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jQuery Datepicker showing without styling

Thibault Duchateau
Administrator
Awesome :-)
Loading...