Buttons on bootstrap timepicker is not showing - javascript

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);

Related

jquery-ui resizable issues (can't get it to work no matter what I try)

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

Javascript html header strange behaviour

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>

datepicker is not a function

This question is already asked many times but none of them worked for me. I am trying to use this date picker in a JSP file. This is my script
<head>
<title>My Home</title>
<link rel="stylesheet" type="text/css"
href="../resource/css/page-style.css" />
<link rel="stylesheet" type="text/css"
href="../resource/css/jQuery-ui.css" />
<script src="../resource/js/jquery-1.9.1.js"></script>
<script src="../resource/js/jquery-ui.js"></script>
<script type="text/javascript" src="../resource/js/form-elements.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#shortcuts").load("shortcut.html");
$("#datepicker").datepicker();
alert('jQuery is working');
});
</script>
</head>
The shortcut file is loading perfectly, alert is also showing. I get error message as TypeError: $(...).datepicker is not a function. I am not facing this problem if I run this script in a html file placed in my desktop, when I copy the come code to my IDE and run it I get this error in my console. Please suggest me what can I do? I know this question is asked several times I have checked every answer this is the only link having close match to my prob but didn't work for me.
The problem is with your imported files.I think you have not placed them properly.
Try to import these files
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
It is working for me.
see here for more information
Double check that there are no JQuery references after your JQuery-ui reference.
I had an extra JQuery reference that came after my JQuery-ui reference and lost an hour chasing the problem. That will cause the datepicker not found error.
This is something to do with the import files. I also faced the same scenario and following imports helped me to overcome the following issue "datepicker is not a function".
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Fancybox Problems, nothing happens

I want to integrate Fancybox in my gallery with the following Code:
Include the scripts :
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="tl_files/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="tl_files/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="tl_files/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link rel="stylesheet" href="tl_files/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
my Link to an picture looks like that :
< a class="fancybox" data-fancybox-group="gallery" title="hello world" href="tl_files/photomania/images/51.jpg"><img src="tl_files/photo/images/51.jpg"></img></a>
And in the end i call the fancy box with following code:
<script type="text/javascript">
(function($) {
$('.fancybox').fancybox();
})(jQuery);
</script>
But nothing happens.. please help me
What kind of error du you get?
Have you checked the javascript console, or firebug (if you use firefox/iceweasel)?
Paste the error messages and it will be easier to help you out.
try this:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
Since you load jquery at the first row I don't think you need to do it like that.
It should work.

Where do I put the JQUERY UI theme folder?

This is my code. It turns my text box into a date picker.
<script type="text/javascript" src="{{MEDIA_URL}}template/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}template/js/jquery-ui-all.min.js"></script>
<script type="text/javascript">
$(function() {
$("#start_date").datepicker();
$("#end_date").datepicker();
});
</script>
Where do I put the ui-lightness folder? It contains the images and js of the theme. Right now, the images and CSS are blank on my page.
You can place it anywhere you like, but you need to link the the CSS file to have it affect your page.
You need the default CSS
<link type="text/css" rel="stylesheet" href="Content/jquery-ui.css" %>" />
And the control specific files as well, for instance the dialog would need.
<link type="text/css" rel="stylesheet" href="Content/ui.dialog.css" %>" />

Categories