Comments (22)
Hi,
I had the same error which was fixed by removing data-role="tagsinput"
when using the js initialisation method. The example code block suggests both should be included which seemed unusual.
Hope that helps
from bootstrap-templates.
Hmmm, I'm not sure why the following doesn't work:
ingredientsInput = jQuery("#ingredientsList")
ingredientsInput.tagsinput();
Could you try to reproduce the error in something like jsfiddle?
from bootstrap-templates.
I tried that one, too. It worked, yes, but typeahead still produced an error (the second one). I'll create a jsfiddele when I have time.
from bootstrap-templates.
Hi thommyg,
Any updates on your issue? The data-role="tagsinput" fix didn't work for me. I traced it to the JS line in the bootstrap-tagsinput.js file:
var retVal = tagsinput[arg1](arg2);
I'm new to JQuery and am not sure what that line is supposed to do. My value for arg1 is '#seedvalue1' and arg2 is undefined. Just for completeness, my HTML looks like:
<input class="form-control" id="seedvalue1" name="seedvalue" class="seedvalue1" placeholder="Start typing..."/>
And my JS code looks like the following:
$('#seedvalue1').tagsinput(); $('#seedvalue1').tagsinput('#seedvalue1').typeahead({ name: 'seedac', remote: { url: '../rule/ajaxAutoComplete?attribute=%QUERY', replace: function (url, uriEncodedQuery) { return '../rule/ajaxAutoComplete?attribute=' + $('#seedattribute').val() + '&query=' + encodeURIComponent($('#seedvalue1').val()); } }, limit: 10 }).bind('typeahead:selected', $.proxy(function (obj, datum) { $(this).tagsinput('add', datum.value); $(this).tagsinput('input').typeahead('setQuery', ''); }, $('#seedvalue1')));
And the JS TypeError I received was:
Object #<TagsInput> has no method '#seedvalue1'
Thanks,
Paul
from bootstrap-templates.
Hi Tim,
Just FYI, I'm using Bootstrap 3, JQuery 1.10.2, and Twitter Typeahead JS 0.9.3. And I just realized from browsing the bootstrap-tagsinput code that you use typeahead with a "source" attribute - this leads me to believe that you are not supporting the latest Twitter Typeahead version. Can you confirm? What confuses me is that in your example page for Bootstrap 3, you had mentioned Twitter Typeahead from the same URL @ http://twitter.github.io/typeahead.js. If you are not supporting Twitter Typeahead 0.9.3, how should I get my stuff to work with the Typeahead that you support?
Thanks,
Paul
from bootstrap-templates.
Hi Tim or thommyg,
I would really appreciate a response to my question above if you have some time. Or perhaps if you can tell me which other forum would be a more appropriate place, I can post this question there to get some better traction.
Thanks,
Paul
from bootstrap-templates.
This might be a hint, however, momentarily I have no time for testing it. Maybe next week.
from bootstrap-templates.
Sorry what is the hint again?
from bootstrap-templates.
Using an older typeahead version. However, I did not develop the plugin, so I don't know which typeahead version Tim used.
from bootstrap-templates.
The codeline you referred to is the initialization of the return value, as ist seems. It's not a speciality of jQuery but pure JavaScript and says "create an array of functions and each of them accepts an argument".
from bootstrap-templates.
Oh, and don't use bind, it's deprecated. "on" and "off" are the functions you should rely on.
from bootstrap-templates.
I see. That's OK for now - in waiting for a response I've gone ahead and found the selectize plugin which seems to support Bootstrap 3 and has autocomplete / typeahead as well. I'll give that a try - seems that mentioned all 3 of chosen, select2, and tagsinput, so it may know about the shortcomings of each and hopefully have found solutions or workarounds.
Regarding the codeline you helped clarify, is there something wrong with the logic of the code or am I passing my arg1 in wrong?
Regarding "bind", I copied that somewhere - I don't recall where though.
from bootstrap-templates.
To clatify the line
retVal = tagsinput[arg1](arg2)
this can not work unless you have an array of functions stored in tagsinput like
var tagsinput = {something: function(arg) {console.log(arg)}, anything: function(arg) {...}, ... ];
arg1 = "something";
arg2 = "Hallo";
tagsinput[arg1](arg2);
However, I don't know if this would actually work. What you are trying to do ist (i guess), calling the function tagsinput with two arguments (have you done something with TeX/LaTeX before?). This is done by separating them with commas:
var retVal = tagsinput(arg1, arg2);
However, in my opinion, select2 is always a good choice.
from bootstrap-templates.
Hi thommyg,
Thanks so much for helping with this and explaining how that codeline is supposed to work. I was actually hoping Tim could chime in on his reasoning behind that line himself - as it was found in his JS code. I dug around his code some more and found that before that line, tagsinput was initialized with the line:
var tagsinput = $(this).data('tagsinput');
It was checked for null, and if null, then a TagsInput is created with:
tagsinput = new TagsInput(this, arg1);
So presumably the arg1 that would have been passed in the first time, when tagsinput is null and the constructor was called, is used the second time when tagsinput is not null. I guess it still doesn't explain why Chrome was reporting the error I was seeing.
Anyway, here's his function with my alerts sprinkled all over the place. Maybe you can decipher a bit better what Tim was trying to do and / or how it would lead to my error:
$.fn.tagsinput = function(arg1, arg2) { var results = []; alert("In fn.tagsinput, this is "+($(this))+" and arg1 is "+arg1+" and arg2 is "+arg2); $(this).each(function() { var tagsinput = $(this).data('tagsinput'); alert("tagsinput is "+tagsinput); // Initialize a new tags input if (!tagsinput) { alert("if block"); tagsinput = new TagsInput(this, arg1); $(this).data('tagsinput', tagsinput); results.push(tagsinput); if (this.tagName === 'SELECT') { $('option', $(this)).attr('selected', 'selected'); } alert("this val is "+$(this).val()); // Init tags from $(this).val() $(this).val($(this).val()); alert("this val is "+$(this).val()); } else { alert("else block, tagsinput type is "+(typeof tagsinput)+" and arg1 is "+arg1+" and arg2 = "+arg2); // Invoke function on existing tags input var retVal = tagsinput[arg1](arg2); alert("retVal is "+retVal); if (retVal !== undefined) results.push(retVal); } }); if ( typeof arg1 == 'string') { alert("typeof = string"); alert("results is "+results); // Return the results from the invoked function calls return results.length > 1 ? results : results[0]; } else { alert("typeof = "+(typeof arg1)); return results; } };
from bootstrap-templates.
Hi Tim or thommyg,
Any updates on this? I'm hitting a wall with selectize because I can't seem to set default values for an input once it's been selectized. For some reason, even though several people have raised this issue, the author seemed to not have deemed it important enough or worthy of his response.
Really hoping Tim is monitoring this and will one day have some free time to look into my question...
Thanks,
Paul
from bootstrap-templates.
Hi Paul,
Did you manage to use Twitter Typeahead with Bootstrap3 tag library. I am in same fix as you were 2 months back.
Please let me know what helped you.
Thanks,
maria.
from bootstrap-templates.
Hi Maria,
I eventually dropped Twitter Typeahead and went back to selectize.
Just shows how banging my head on the wall long enough will eventually yield results, when I have no other choice because TimSchlechter the author of bootstrap-tagsinput seems to have dropped off the face of the earth since his last post 4 months ago. Sorry just had to vent...
My problem with selectize was the inability to set a default value that I have loaded from my database. I eventually solved my problem with selectize when I realized that selectize.setValue doesn't do anything when you don't have any options. So I just had 2 helper functions do exactly that.
/** * Sets the selectize field by parsing a string with a delimiter. * * This is very important - must add the option before you can call * setValue otherwise there is no option to match the value * * @param value * @param delimiter * @param inputField */ function setSelectizeField(value, delimiter, inputField) { // Parse the seedCondition value var options = value.split(delimiter); var values = []; var selectize = inputField[0].selectize; for (var i = 0; i < options.length; i++) { values.push(options[i]); // Sadly, the value field of 'name' cannot be passed in as a parameter selectize.addOption({'id':options[i], 'name':options[i]}); } selectize.setValue(values); } /** * Sets the selectize field by inspecting a value array to feeding it into * the inputField. * * This is very important - must add the option before you can call setValue * otherwise there is no option to match the value * * @param value * @param delimiter * @param inputField */ function setSelectizeFields(valueArray, inputField) { var selectize = inputField[0].selectize; var values = []; for (var i = 0; i < valueArray.length; i++) { values.push(valueArray[i].id); selectize.addOption({'id':valueArray[i].id, 'name':valueArray[i].label}); } selectize.setValue(values); }
And that seemed to have solved my problem of setting default values for my selectize input.
from bootstrap-templates.
Hi,
It was nice using this plugin but, I need Confirm box on beforeItemRemoved - if(confirm) then remove else not... I tried using
$('input#emaildb-privatetag').on('beforeItemRemove', function (event) {
deleteFn(event);
// where div consisting of cancel and delete buttons only on delete it should be removed not on cancel
});
from bootstrap-templates.
I have read all Comments to finding out the solution , But I am not getting my solution,
My console Errror is : TypeError: $(...).tagsinput is not a function,
I had also tired removing data-role="tagsinput", But again its not working :)
from bootstrap-templates.
yes,, I got the same problem with @alok111444 ,
$(...).tagsinput is not a function,
from bootstrap-templates.
having the same problem.. was this solved?
from bootstrap-templates.
I got it solved by refreshing the input element. Hope it helps someone. Here's the snippet
<input type="text" id="emailAddresses" ng-model="detailCtrl.instruction.ltaRequest.emailAddresses" tag-input="primary" data-role="tagsinput"> <script> $('#emailAddresses').tagsinput('refresh'); </script> </input>
from bootstrap-templates.
Related Issues (20)
- add array
- Uncaught TypeError: Cannot read property 'name' of null in bootstrap-tagsinput.js. HOT 2
- Repo activity? HOT 2
- How to append class or text to newly added tag? HOT 1
- How to get text of removed tag HOT 1
- How to return text of clicked tag HOT 1
- how to implement text sanitize on freeInput? HOT 1
- Safe string decodeURI
- tagsinput typeahead empty input have value []
- remove all method issue
- Show hint tags after type three characters HOT 3
- Is there any way to use Typeahead and New tags together? HOT 1
- only show tags
- prevent users from adding tags
- The script limits my tags to 256 symbols for unknown reason. HOT 1
- Jquery security adivisor version
- Support for Bootstrap 4 HOT 2
- delimiter
- No tag found that was able to satisfy 0.7.1 HOT 2
- No versions found
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-templates.