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.