I am trying to use the button from the jQuery UI. for some reason, my button does not work properly. To test it out, I tried making the button to be disabled but when I run the program, it is still clickable. My script path files are right because I was using the slider jquery ui widget and it worked.
This is my code for my the script of my button:
<script>$(document).ready(function(){
$("#dateButton").button({
disabled:true
});
});
});
</script>
This is my button delcaration:
<button id="dateButton"> Date </button>
And these are the scripts I am using (using bootstrap):
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
ALSO, if I were to call a function when the button is clicked, would I write it like this?:
$("#dateButton").button({
Code goes in here for the function
});
bootstrap and jQuery UI do not get along with button see https://github.com/twbs/bootstrap/issues/6094
Solution is to use noConflict
(function() {
var bootstrapButton = $.fn.button.noConflict();
$.fn.bootstrapBtn = bootstrapButton;
}());
$(document).ready(function() {
$("#dateButton").button({
disabled: true
});
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" />
<button id="dateButton"> Date </button>
https://jsfiddle.net/m5ergv2a/
Even though your declaration is current for initializing a jquery UI button, you need to associate it during the page load which can be done during document.ready function.
$().ready(function()
{
$("#dateButton").button({
});
$("#dateButton").click(function(){
// do stuff here
alert();
});
});
Example : http://jsfiddle.net/DinoMyte/xBB5x/10222/
Also, make sure to get the reference to jquery-ui.css from CDN to confirm that the api is loaded correctly .
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
Related
I must be missing something really simple but I can't for the life of me figure out what.
Basically on the page I'm working on I've 6 divs with the same class and I need them to be resizable. I couldn't get it to work so I created a simple test page just to see if it would work there with the syntax I'm using.
I've tried to use it inside and outside the document.ready function and none of it worked.
Here's the code for what is loading and the script:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/oam-white.css" rel="stylesheet">
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="js/jquery-ui-1.12.0.custom/jquery-ui-1.12.0.custom/jquery-ui.min.css">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/oam.js"></script>
<script>
$(document).ready(function() {
});
$(function() {
$('#test').resizable({
animate: true
});
});
</script>
Here's a codepen
Thank you in advance for the help. Rod
I have my code in this Fiddle
Why doesn't the drop function fire? Over does not fire either.
I am using the following headers
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
The droppable method was outside of the initialize function i moved it inside and now it works
I'm using Bootstrap 3 DateTimePicker but having some minor issues.
Basically, on the dp.show event, how do I get the source control? As far as I can tell, there is no parameter sent with the event, so I'm having a hard time figuring out which control actually showed.
(I have many pickers in my application)
Standard JQuery would tell me I could use e.Target, but there is no e sent with the event :(
How do I handle this?
You can attach a handler to your datepicker collection
$('.datepicker').on('dp.show', function() {
// this here will refer to the currently showing widget
console.log(this);
});
This is the standard bootstrap way of dealing with events.
EDIT: if you read the source code, the event is bound to the element with which the datepicker is initialized: https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstrap-datetimepicker.js#L451
you can use events like below
<script src="//code.jquery.com/jquery-2.1.3.js" type="text/javascript"></script>
<link href="/css/result-light.css" type="text/css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" type="text/css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$('#datetimepicker6').datetimepicker();
$("#datetimepicker6").on("dp.show", function(e) {
console.log(e);// e is event and use console to explore other options
});
}); //]]>
</script>
</head>
<body>
<div class="input-group ">
<input type="text" class="form-control" id="datetimepicker6">
</div>
</body>
</html>
Consider the following html head javacsript and css referecnes:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
The above datepicker does not work, but this does:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
So if I place the referencve 'fadeslideshow.js' above the the reference to the main jquery library and ui file. Similarliy if I comment out the fadeslideshow.js reference the datepicker will work.
Why would this be the case, it took me over an hour to figure out why the datepciekr was not working?
Thanks,
Alan.
Because browsers evaluate Javascript files as soon as they are loaded. fadeslideshow.js depends on either jQuery or jQuery UI. it will try to reference a non-existant object, which, depending of the functionality of the script, may set a variable to a state not compatible to jQuery UI's datepicker.
Fixed by adding a reference to an old version of jquery which fadeslideshow.js must obviously depend on:
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
I'm using a time picker but I can't get to make the buttons show. Here's how the timepicker looks.
Here's how I render it.
<input type="text" class="form-control timepicker appt_time" style="width:200px;">
<script>
$('.timepicker').timepicker();
</script>
Here's how I set them in my header
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-datepicker.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-timepicker.css">
<script type="text/javascript" src="/content/script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-timepicker.js"></script>
I got the css files and the js files for the timepicker
Here.
Any ideas what's causing this? Thanks!
You have got css and js files but you've missed to capture the glyphicons.
The glyphicons are responsible for showing the buttons on the timepicker.
If you can inspect your developer tools on your buttons you can see that the images seems to be missing.
Here is what i've found on the site that you have picked timepicker
Include the glyphicons png file on your site to get the images work perfect.
Hope this helps
Try script as...
<script type="text/javascript">
$("input[id$='timepicker']").timepicker({
minuteStep: 5,
showInputs: false,
disableFocus: true
});
</script>
Give an id , say id="timpick" and in call as $('#timpick').timepicker(options);