Jquery-ui plugin in grails 2.4.4 with asset-pipeline to add a date picker

Question

What are the steps I should do inorder to use jquery-ui plugin in grails 2.4.4 with asset-pipeline?

What I have done is: I have added

compile "org.grails.plugins:jquery-ui:1.10.4"

in BuildConfig.groovy

also added:

//= require jquery-ui/js/jquery-ui-1.10.4.custom.min
//= require js/jquery-ui-1.10.4.custom

in application.js

and

*= require themes/ui-lightness/jquery-ui-1.10.4.custom

in application.css

I have added the required script in gsp page:

<script type="text/javascript">
        $(document).ready(function()
        {
          $("#datepicker").datepicker({dateFormat: 'yy/mm/dd'});
        })
</script>

What I am trying to accomplish is to add a date picker in the gsp. What more should I do to make it work?

As advised I have checked the view source: Inside head:

<link rel="stylesheet" href="/NTSuite_Web/assets/application.css?compile=false">
<link rel="stylesheet" href="/NTSuite_Web/assets/bootstrap.css?compile=false">
<link rel="stylesheet" href="/NTSuite_Web/assets/themes/ui-lightness/jquery-ui-1.10.4.custom.css?compile=false">

<script type="text/javascript">
            $(document).ready(function()
            {
                $("#datepicker").datepicker({dateFormat: 'yy/mm/dd'});
            })
        </script>

<script type="text/javascript">
            function doSubmit(val){
                document.getElementById('openMode').value=val;
                document.party.submit();
            }
</script>

In body:

<script src="/NTSuite_Web/assets/jquery/jquery-1.11.1.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/jquery.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/application.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-affix.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-alert.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-button.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-carousel.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-collapse.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-dropdown.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-modal.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-tooltip.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-popover.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-scrollspy.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-tab.js?compile=false" type="text/javascript"></script><script src="/NTSuite_Web/assets/bootstrap-transition.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/js/jquery-ui-1.10.4.custom.js?compile=false" type="text/javascript"></script>

My date picker:

<input type="text" id="datepicker">

I have done all this without understanding whole process, If I can get the answer with correct procedure to do this, it would be fantastic.

1. do view source 2. do you see jquery-ui i the html source 3. What does your development console say any errors / issues reported when calling datepicker ? You need to learn to investigate — V H, Mar 31 '16 at 15:42
@vahid I have added the view source output. How to find issues from console? I you can answer with proper procedure and explanation it would be great. — padippist, Apr 01 '16 at 05:07
you have jquery-1.11.1.js then right under it jquery again - there may be a conflict there for a start - remove the 2nd defined. The developer console is F12 on chrome and then you click on console and view the logs as you click on a page to see if java script returns errors. So far as jquery-ui and datepicker. jquery-ui itself does lots of things so you need to really first work out if jquery-ui is loaded in. http://stackoverflow.com/questions/2260250/testing-if-jqueryui-has-loaded Check this first then if this is all loaded in and your browser console check for any errors — V H, Apr 01 '16 at 07:57
Also jquery-ui comes with a jquery-ui.min.css I can't see your content including your css details. I would suggest one thing. Personally I hardly ever bother with plugins such as jquery-ui bootstrap and so forth. If I wanted to include some other jquery script what would I need to do ?. (i.e. include the css and js files inside grails-app/assets/javascripts stylesheets then followed by a declaration in application.css and application.js the two core files in each folder to add the new css/js styles in. If after 5 mins I couldn't get it to work I be doing that. Here you are 2 days later — V H, Apr 01 '16 at 08:12
In most cases these sort of issues relate to not having any solid understand of the basics. Typically when declaring core JS files they tend to sit at the very top. i.e. jquery and jquery-ui at the very top followed by bootstrap etc. Getting the order of these wrong can have adverse effects. May I suggest having a quick look at https://learn.jquery.com/jquery-ui/getting-started/#basic-overview-using-jquery-ui-on-a-web-page You will see jquery-ui is right under jquery - where as yours at the bottom — V H, Apr 01 '16 at 09:16
Also you are pacing far far ahead without having tested the intials first. You claim jquery datepicker is not working and at the same time it appears you are also loading in bootstrap .. http://stackoverflow.com/questions/18507908/bootstrap-datepicker-noconflict - Boostrap also has its own datepicker. Try slowing down and test jquery - ui on its own with jquery then move along to that specific issue — V H, Apr 01 '16 at 09:20
@vahid I have removed all JQuery UI related meta data from application.js and application.css. Now I have download JQuery UI and added , , , in my page. and added the script — padippist, Apr 01 '16 at 09:23
@vahid but now the console is saying there is no datepicker() function. I have made sure all the js files are loading by making a console output. What would be the problem. — padippist, Apr 01 '16 at 09:25
@vahid I tried out bootstrap date picker it is working but it is out of format, like when we take year it displays a large string of numbers(years without space) — padippist, Apr 01 '16 at 09:28
https://bootstrap-datepicker.readthedocs.org/en/latest/ must be date picker date format related now ? — V H, Apr 01 '16 at 09:32
@vahid It is not relate to the style or format. The thing is when we click on year, the date picker will show year insted of year, month, and days. For me this years is like 2010201120122013201420152016 It doesn't have space. The same thing happens to my months. JanFebMarApr...etc. — padippist, Apr 01 '16 at 09:39
ok I see it was you :) http://www.bootply.com/xIKCNwmEeY# try this and click run - you will need to mess about with it to understand it all better have a look around for bootstrap datepicker examples — V H, Apr 01 '16 at 09:45

Jquery-ui plugin in grails 2.4.4 with asset-pipeline to add a date picker

0 Answers0