I try in my symfony 5.1 form withh boostrap4 using jquery-ui datetimepicker for datetime input but I use in console error Uncaught TypeError: $(...).datepicker is not a function. In template i have
<link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
and before closed body i have
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="{{ asset('js/admin.js') }}"></script>
and in admin.js I have
$(document).ready(function () {
$( "#new_application_date" ).datepicker({dateFormat: 'dd.mm.yy'});
});
whats the problem?
The problem is in using jquery slim, this must be
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
Related
I'm trying to use JQuery UI slider in on of my carousel's items.
I attached JQuery UI files (css and js) and it's not showing up.
$("#slider").slider();
<div id="slider"></div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
the link and script are at the bottom of my body tag. tried to move them to head and still not working.
The console shows:
jquery-3.3.1.slim.min.js:2 jQuery.Deferred exception: $(...).slider is not a function TypeError: $(...).slider is not a function
head tag:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js"></script>-->
<script src="bootstrap/js/bootstrap.js"></script>
<script src="jScripts/JavaScript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<!--<link href="Style/reset.css" rel="stylesheet" type="text/css" />-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="shortcut icon" href="#">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" />-->
<link href="styles/myStyle.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
You must define jquery-UI first.
When you calling $("#slider").slider();
'.slider()' function is not exist yet
Try to include jquery-UI library first.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="slider"></div>
$("#slider").slider();
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.
can you guys tell me why my slider is not working
i have included all the resources in the js fiddle then also its not working
providing fiddle link below
http://jsfiddle.net/YakV7/2/
actual demo
http://tympanus.net/Development/ParallaxContentSlider/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider();
});
</script>
What do you mean by these lines?
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
Change it to the actual path.
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/style.css">
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script>
Or add:
<base href="http://tympanus.net/Development/ParallaxContentSlider/" />
Same working fiddle: http://jsfiddle.net/YakV7/7/
I have a intranet website where I have a page to add new products.
I use ckeditor because I need to save some links.
Now I had to change it into a Master detail form and so I decided to use Json2 and DataTables .
The strangest thing is that when I include
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript">
the ckeditor doesn't work anymore.
These are all the scripts I import
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#*This is for CKEditor*#
<script src="#Url.Content("~/content/javascript/CKEditor/ckeditor.js")" type="text/javascript" ></script>
<script src="#Url.Content("~/content/javascript/CKEditor/adapters/jquery.js")" type="text/javascript" ></script>
#*This is for jquery*#
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
#*This is for JSON*#
<script src="#Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
#*These are for DataTables*#
<script src="#Url.Content("~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DataTables-1.9.4/extras/TableTools/media/js/TableTools.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DataTables-1.9.4/extras/TableTools/media/js/ZeroClipboard.js")"
type="text/javascript"></script>
#*These are for styling Control*#
<link href="#Url.Content("~/Content/DataTables-1.9.4/extras/TableTools/media/css/TableTools.css")"
rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/DataTables-1.9.4/extras/TableTools/media/css/TableTools_JUI.css")"
rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
Any ideas??
You should add the reference to jquery before you add ckeditor. The adaptors are set to extend jquery.
I have the following ASP.NET MVC page written in razor:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>SelectorTests</title>
<link href="#{ Url.Content("~/Content/themes/base/jquery-ui.css"); }" rel="stylesheet" type="text/css" />
<script src="#{ Url.Content("~/Scripts/jquery-1.4.4.min.js"); }" type="text/javascript"></script>
<script src="#{ Url.Content("~/Scripts/jquery-ui.min.js"); }" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('h1').css('background-color', 'purple');
});
</script>
</head>
<body>
<div>
<h1>My Header</h1>
foobar
</div>
</body>
</html>
URL.Content isn't working properly. When I do a View Source in FF, the relevant lines come back as
<link href="" rel="stylesheet" type="text/css" />
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
Please assist.
You're using curly braces when there is no need to.
<link href="#{ Url.Content("~/Content/themes/base/jquery-ui.css"); }" rel="stylesheet" type="text/css" />
Should be:
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
You need only wrap code in curly braces when there is no return value. For example if you were declaring a variable. You would not need curly braces to then output the contents of the variable.
#{
var foo = "bar";
}
<p>#foo</p>
Rich
Try the following
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>