We Keep Coding

Tokenfield (tag input) autocomplete in Bootstrap 3 doesn't work

I am trying to implement a simple tags input in Bootstrap 3 with Tokenfield, but I've stacked somewhere.
HTML code:
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/bootstrap-tokenfield.min.css" rel="stylesheet">
<div class="form-group">
<label for="myinput">Κατηγορία</label>
<input id="myinput" type="text" class="form-control">
</div>
Javascript:
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-tokenfield.min.js"></script>
<script type="text/javascript">
$('#myinput').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
delay: 100
},
showAutocompleteOnFocus: true
})
</script>
Error:
It doesn't show the autocomplete. I don't have any error in the console. I can add tags manually.

From what I see this it's the same problem I had a few days ago.
What you need as well is jquery-ui with autocomplete.js.
http://jqueryui.com/download/ generate your own jquery-ui.min.js including autocomplete.js and it should work.

You do NOT necessarily need jQuery UI, nor Typeahead Js. If you are looking for
a simple tags input
without autocomplete feature, just initialize like this
$('#myinput').tokenfield();
Hope it helped.

include jQuery UI (with autocomplete)
if you use "Bootstrap modal" or "jQuery-UI dialog" take a little fix:
.ui-autocomplete { z-index: 5000; }

The Tokenfield works either with Jquery Ui autocomplete or with Typeahead Js. You must use one of them but from the code above you are not using any of them so of course nothing will happen.
From the code above, you are trying to implement it with Jquery Ui autocomplete so you will need to link to the css and javascript of jquery Ui autocomplete
Read More about Bootstrap Tokenfield here

I know this answer came pretty late, but the autocomplete property for setting the lookup data is not source but lookup.
Tokenfield's example at http://sliptree.github.io/bootstrap-tokenfield/#options is not updated.
You can see that the right property is lookup from https://github.com/devbridge/jQuery-Autocomplete

It will work if you include both jquery-ui js and css.
Go to this link jquery-ui
Download 1.12.0-rc.2 version of jquery
Include both jquery-ui.css and jquery-us.js in your html
It worked for me.

date picker undefined is not a function

IM using the following code and I got error is the console
undifinnd is not a function,what am I doing wrong here ?
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetime').datepicker();
});
</script>
I've also try with and I got the same error...
$('#datetime')..datetimepicker();

It looks like from the code you are only inlcuding the main jQuery library and not including the jQueryUI library for which that method is part of (http://jqueryui.com/datepicker/). If you include the jqueryUI library after your jQuery script call you should stop getting errors.

Datepicker is in JQuery UI. You must include that library as well.

Uncaught TypeError: undefined is not a function while using jQuery UI

I haven't used jQuery before, and I wanted to use DateTimePicker plugin on my web page.
I downloaded the plugin file and placed them in the same directory as the HTML files.
I directly applied the code at How to use it? in http://xdsoft.net/jqplugins/datetimepicker/.
It threw the following error.
Uncaught TypeError: undefined is not a function pixelcrawler:61 (anonymous function)
My code follows.
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ >
<script src="file:///jquery.datetimepicker.js"></script>
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
<div class="container">
<div class="text-center">
<div class="page-header">
<h1>${conf['title']} <small>${conf['description']}</small></h1>
</div>
</div>
<div class="text">
<input id="datetimepicker" type="text" >
.
.
.
.
.
I could not figure out what the problem was. I have tried many other seemingly likely options, but it just did not work either.
(The ${} tags are used for the Mako template language. I am using Cherrypy.)
UPDATE:
I figured out the source of the problem.
It's from jQuery('#datetimepicker').datetimepicker();.
When tested, the datetimepicker() function was undefined. Maybe the way I imported the library was wrong?

jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
I don't know your file-structure. I never include local files like this as I use relative URLs from the start rather than having to change everytime I'm ready to use the code, but it's likely one of the files isn't being loaded in. I've included the standard datepicker below using Google CDN's jQuery UI. Does your console log any resources not found?
I think your jQuery is loaded OK, because it's not telling you jQuery is not defined so it's one of your files.
BTW, PHP gets the home URL:
$home="http://" . $_SERVER['HTTP_HOST'].'/';
Demo code datepicker, jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">

This is about the HTML parse mechanism.
The HTML parser will parse the HTML content from top to bottom. In your script logic,
jQuery('#datetimepicker')
will return an empty instance because the element has not loaded yet.
You can use
$(function(){ your code here });
or
$(document).ready(function(){ your code here });
to parse HTML element firstly, and then do your own script logics.

use jQuery.noConflict()
var j = jQuery.noConflict();
j(document).ready(function(){
j('#datetimepicker').datepicker();
})

For my situation, it was a naming conflict problem. Adding $J solves it.
//Old code:
function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
}
And the following is new code.
$j(function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$j("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
});
});
Hope it could help someone.

Usually when you get this problem, it happens because a script is trying to reference an element that doesn't exist yet while the page is loading.
As richie mentioned: "The HTML parser will parse the HTML content from top to bottom..."
So you can add your JavaScript references to the bottom of the HTML file. This will not only improve performance; it will also ensure that all elements referenced in your script files have already been loaded by the HTML parser.
So you could have something like this:
<html>
<head>
<!-- Style sheet references and CSS definitions -->
</head>
<body>
<!-- HTML markup and other page content -->
<!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
</body>
</html>

You may see if you are not loading jQuery twice somehow. Especially after your plugin JavaScript file loaded.
I has the same error and found that one of my external PHP files was loading jQuery again.

The issue because of not loading jquery ui library.
https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN source file
Call above path in your file.

And if you have this problem in slider or slideshow you must use jquery.easing.1.3:
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

I had trouble getting selectable to work with ASP.NET. It turns out I wasn't properly including everything, but this gentleman made it foolproof: Three steps to use jQuery UI in ASP.NET MVC 5.

I don't think jQuery itself includes datetimepicker. You must use jQuery UI instead (src="jquery.ui").

Using Zurb Foundation tooltip outside of the framework

I'm trying to use the zurb foundation tooltip script without loading any of the other foundation library for my site but when I try to load it, it's throwing this js error.
My mark-up looks something like this:
<span class="has-tip tip-right" data-width="200" title="This is a tip">This is a tip</span>
<script src="js/jquery.js"></script>
<script src="js/jquery.foundation.tooltips.js"></script>
<script src="js/app.js"></script>
JS error:
Uncaught TypeError: Object [object Object] has no method 'tooltips' app.js:5
(anonymous function) app.js:5
fire jquery.js:1075
self.fireWith jquery.js:1193
jQuery.extend.ready jquery.js:435
DOMContentLoaded jquery.js:949
Here is how I'm loading the script
(function ($) {
$(function(){
// initialize tooltips
$(document).tooltips();
});
})(jQuery);
Does anyone know why this is happening?

I think you aren't calling the function by the correct name. It should be $(document).foundationTooltips() and NOT $(document).tooltips()
Full example:
(function ($) {
$(function(){
// initialize tooltips
$(document).foundationTooltips(); //This line right here
});
})(jQuery);

The new doc should have this:
<span data-tooltip class="has-tip tip-right" data-width="200" title="This is a tip">This is a tip</span>
Notice the "data-tooltip". That is very hard to find documented right now.

Foundation tooltips appears to use the title attribute as a default tooltip as do most tooltip libraries. data-tooltip is a custom field used only by someone who wants to use it themselves - not as a documented item. Google "data attributes in html5".

DatePicker Does Nothing When Clicked

I'm trying the simplest example of getting datepicker to work, and I just can't seem to get it. There is almost nothing in my fiddle.
The top of my web page has this:
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />
<script src="~/Scripts/jquery-ui-1.8.11.js" type="text/javascript" />
<script>
$(function(){
$("#datepicker").datepicker();
});​​​
</script>
Note: I tried putting the first two script lines in _Layout.cshtml, but I got an error (don't recall the error at the moment). That's why I just put it all on the one page.
And down a bit, in that same page, is this:
<td><input type="text" id="datepicker"></td>
When I click on the input control, nothings happens. However, when I click on the control in the fiddle, it works. What am I missing?
Also, you'll notice I'm using jquery 1.6.2 and jquery-ui 1.8.11. That's different than the fiddle example because fiddle didn't provide those versions as options. I'd be surprised if the version was the difference.

Script tag must have both opening and closing items. You cannot shorthand close them.
Instead of this
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />
do this
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript"></script>

I'm hoping this won't be the final answer, but I finally got the datepicker to display. After much trial and error, and research, I seem to have a jquery conflict, but I don't know why. Someone suggested something called non-conflict mode. So I changed my datepicker code to this:
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$("#endTime").datepicker();
});
})(jQuery);
</script>
And it worked. I'm not sure why, but it's finally at least working. If anyone can provide more insight, or a better answer, I'd gladly pick it.
The above example is explained in this answer: Basically, what I did was define a function that takes a parameter (the $) and then execute that function with jQuery as the parameter.
What I still don't understand though, is why this code won't work:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#endTime").datepicker();
});
</script>
If there was a conflict because of the $, and I replaced $ with jQuery, shouldn't it work?

The datepicker is pretty much straight forward why dont you use something like firebug in mozilla to see if it is throwing some error also date picker internally uses the Jquery theme roller so please download and add the jquery "css/custom-Theme/jquery-custom.css" css.