Uncaught TypeError: Converting circular structure to JSON

bootstrap-tagmanager with bootstrap-typeahead

Hi Max,
I have a problem with your plugin, why the tag cannot blink like your demo when I input same tag?

Thanks.

there is no new Tag created when you try recreate the latest deleted Tag that you add with < Enter > via Typeahead

tested and experienced on Ubuntu Linux, Gentoo Linux, Mac
at http://welldonethings.com/tags/manager and locally

While typing a new tag in the input field, it's impossible to delete characters using Backspace.

I would like to utilize this plugin for a user selection field.

Say I have a users table that maps an ID to non-unique names (e.g. John Doe). As it is, if I wanted to search by the user's name, this plugin would post the name upon form submission. Ideally, it would be great if support were added to retrieve and post the ID for the entries instead of the display values.

So, typeaheadAjaxSource should produce JSON similar to that below:

{"tags":[{"tag":"Pisa", "id":1},{"tag":"Rome", "id":2},{"tag":"Milan", "id":3},{"tag":"Florence", "id":4},{"tag":"New York", "id":5},{"tag":"Paris", "id":6},{"tag":"Berlin", "id":7},{"tag":"London", "id":8},{"tag":"Madrid", "id":9}]}

The value of the tag attribute is displayed, while the value of the id attribute is actually submitted.

You bind keyup to catch delimiters, what ever my layout is when I press key where comma is keyup fires event with code 44. The problem is that in Cyrillic/Russian keyboards we have symbol б (b symbol) on that key.
http://www.terena.org/activities/multiling/ml-mua/test/img/kbd_russian.gif

So it makes impossible to enter any word with than symbol because tagsManager triggers pushTag event, I assume keypress event instead must be used. I'm sure this issue isn't limited to Russian language, CJK inputs probably have the same issue.

Yes I still can set another delimiters but I want to be able to use commas as well.

When sending the updated tag data to the server, it would be good to be able to add some extra parameters to the post request. E.g. an entry's ID or a csrf token.

With the lates bootstrap.less file included I get this error in the browser:

variable @wellBackground is undefined
in bootstrap-tagmanager.less on line 6, column 38:
.myTag {
background: none repeat scroll 0 0 @wellBackground;
border: 1px solid @linkColor;

I checked the Twitter Bootstrap customization page and indeed there's no @wellBackground variable.

I've just tried your demo using Opera 12.14 and if I type a single character and get a list of a few options in the dropdown it doesn't let me use the keyboard (pressing down arrow) to move between options in the dropdown.

This functionality works in the bootstrap typeahead demo on http://twitter.github.com/bootstrap/javascript.html#typeahead and your demo works in Chrome but not for me in Opera.

Is this a bug or just something that has been fixed in the latest version of bootstrap typeahead?

Thanks

Great plugin, I've adopted it to Roadkill .NET wiki as its new tag manager.

I've got a small suggestion which I've added to our version of the plugin: if the hidden field already exists, then it's removed in the setup.

To do this I added these lines to line 344:

        var hiddenTag = $("input[name=" + tagManagerOptions.hiddenTagListName + "]");
        if (hiddenTag.length > 0)
        {
            hiddenTag.remove();
        }

Pretty simple, but ensures that your page/tag hidden field can be used inside smoke tests frameworks that don't have Javascript enabled.

Regards
Chris

Uncaught TypeError: Cannot read property 'Constructor' of undefined

I'm using the tag manager with the typeahead enabled and it's not working. The typeahead list does not appear at all.

When you insert tags without any space in the tag name, the row of tags never ends, thus tags go out of "spans" or "wells". They only break a new line if there is a space in the name of a given tag.

The solution is very simple. Just add:

display: block;
float: left;

to the .myTag{} in the css file.

Congratulations for this bootstrap plugin!

Could be worth to mention :)

https://rubygems.org/gems/tagmanager-rails

The format of bootstrap's typeahead has changed and I believe this has broken tagmanager's typeahead functionality. I'm not entirely sure as I'm new to tagmanager, and the docs don't provide an example of usage.

What I have is:

$("#user_tags").tagsManager({
  prefilled: #{tags},
  preventSubmitOnEnter: true,
  backspace: [],
  CapitalizeFirstLetter: true,
  maxTags: 3,
  typeahead: true,
});

That all works fine apart from typeahead. To populate, I am trying:

$("#user_tags").typeahead({
  source: function(query, process) {
    $.get('/#{@user.uname}/tags', { query: query, limit: 4 }, function(data) {
      return process(data);
    });
  }
});

This, or similar, works fine for other cases, but for tagmanager, even the ajax get is not being invoked.

I was this close pinches fingers together real tight to making a pull-request for #3 that, but I realized there is another issue with the hidden tag list.

I'm using this with Rails, and with Rails you can use the query string so that : ?tags[]=one&tags[]=two&tags[]=three turns into a neat array (accessible through param[:tags]) so it might be nice to have a second strategy, so that each tag has it's own hidden-field.

Sounds trivial - is not, and since it requires a bit of a rewrite, I would like your opinion on this, @max-favilli

When using multiple instance on the same page (even with the demo version on http://welldonethings.com/tags/manager), the list of tags get messed up, when you switch between the two input fields.

So when I submit Berlin in the first input field, and then switch to the second, Berlin is added to the second list too.

the tagmanager demo on http://welldonethings.com/tags/manager doesn't work for me anymore. i can't type anything in the input fields. tested with newest chrome and safari.

just wanted to let you know

With the following setup options, no new tag is created when hitting the comma (",") when typing tags in the associated input field.

var skillsOptions = {
backspace: [],
CapitalizeFirstLetter: false,
typeahead: true,
typeaheadSource: ['Tag1','Tag2','Tag3'],
delimeters: [188, 13],
tagClass: 'label',
tagsContainer: '#skillTagsContainer',
hiddenTagListName: 'skills',
preventSubmitOnEnter: true
}

Best Regards,

Marc

When clicking the X to remove a tag and used in conjunction with the < base > tag, the page gets reloaded to the base URL. In order to avoid this, you could use jQuery's prevent default in line 211

....
jQuery("#myRemover_" + TagId).on("click", obj, function (e) {
            e.preventDefault(); //add this line
            var TagIdToRemove = parseInt(jQuery(this).attr("TagIdToRemove"));

....

Without reading the source code, it would appear that there is no way to push a new list of tags after a tag is removed.

Adding AjaxPushAllTags to the documentation (blog) would resolve this.

I already have a value in the input field. Is there a setting to have tag manger parse the value and add them into the tags

To reproduce:

• scroll through a typeahead dropdown list with the cursor keys
• hit enter on a selected item

Two tags are created. The first will be the typed characters. The second will be the selected item from the dropdown. If maxTags is set, then only the first tag is created should the second be greater than maxTags.

When i try to add a tag, and press enter istead of comma, the tag is not being added. I tried to disable all my javascript and the same thing happened. Also tried to remove the delimiter option.

$(".productTagManager").tagsManager({
    CapitalizeFirstLetter: true,
    preventSubmitOnEnter: true,
    typeahead: true,
    typeaheadAjaxPolling: true,
    typeaheadAjaxSource: '/system/ajax/produtoTags.php',
    blinkBGColor_1: '#FFFF9C',
    blinkBGColor_2: '#CDE69C',
    hiddenTagListName: 'productTag',
});

Maybe I've missed something, but is there a way to save the tags information back to the server with ajax besides the ajaxpush option? Your option sends a new tag each time it's added but I don't see any logic to inform the server of a deleted tag.

For our own copies I simply added a custom event to the refreshHiddenTagList method:

obj.trigger('tags:refresh', tlis.join(","));

Then in our scripts I listen for it and save the entire batch of tags to the server. This let's me wipe the old tags and save the new ones, which takes care of deleted tags.

$('.tagManager').on('tags:refresh', function(e,tagstring){
    $.post('/our/url', {tags:tagstring});
});

I'm using the plugin without any options:
$("#tags").tagsManager();

Unfortunately jQuery gives a general error:
TypeError: e is undefined

I'm using jQuery 1.9.1. Is this component ready for that version?

My research into tag managers led me to this project. I rewrote it and was about to rewrite it based on my first rewrite when I decided it would be better to let the community develop this together.

So, in support of this effort there is a new development site
http://tagmanager-tomanderson.rhcloud.com/

The new repository is
https://github.com/TomHAnderson/tagmanager

Currently the project is soliciting input from the community on the functional specifications of the tag manager.

Thanks,

Tom

I turned an input field into a tags manager with "tagsContainer" using this command:
$(".tagManager").tagsManager({tagsContainer: "#my-tags-container"});

Once tagsManager has been created, I want to push some new tags via pushTag method: "$(".tagManager").tagsManager('pushTag','I_am_a_new_tag');". The problem here is new tags aren't added into "#my-tags-container" element, defined above. They are added into DOM using default behavior, it means with not container.

To repro, simply call

jQuery(".tagManagerSelectorDoesntExist").tagsManager();

You'll get "Uncaught TypeError: Cannot call method 'replace' of undefined " in line:

var objName = obj.attr('name').replace(/[^\w]/g, '_');

Hi,
You should update the documentation, as you now store tags in tagmanager initialized input field and not in hiddenTagList input anymore.

Can you please add a typescript definition for this as well as put this javascript library in nuget.

Hi,

I would like to add the name of the tagManager input field in the hiddenTagListName option, something like :

$('.tag_manager').tagsManager({
 hiddenTagListName: 'tag_'+$(this).attr('name')
});

But it doesn't work.

Is there an easy way of doing this ?

This plugin has a great feature preventing users from entering duplicate tags. However, when we give a list of tags via the "prefilled" attribute, it does not compare against that list and only takes in consideration the ones just entered.

Hi There,

I've been trying to fix this bug, but I'm not very experienced in js, and kinda running out of time.

When using typeahead, if the user types a comma while the suggestion box is present, the suggestion box disappears, but the comma stays in the input box and no tag is created. This is confusing since the user should always be able to use the comma to create a tag, with or without suggestions present. This allows tags with commas to be submitted.

A fix would be much appreciated!

P

[Edit: I see that it works as expected on the demo page. I'm not sure what would cause different behavior on my test site. Any ideas appreciated. ]

I am using this great plugin with Ruby on Rails
And in Rails there are quite a lot of name are like: user[skill_tags]

And it seems that you are generating ID for tags from name
Which makes it like this: user[skill_tags]_0

Now I am using a custom name for that input, no big trouble
But it would better to escape those characters, since by spec they are forbidden

More about selector:
http://api.jquery.com/category/selectors/

Thanks in advance :)
Pika~

writing "it[enter]" will get the gat "italy" as espected, but also tag "it". (on demo page)

I was using the following input tag to implement tag management:

As stated in the documentation I should geet something like this for the hidden input tag:

... but I get something like this:

As you can see, the name of the hidden input tag it's "hidden-idea_tags", it's basically "hidden-" concatenated with the name of the other input tag.

I can leave with that, and maybe it's better this way, but in that case the documention must be updated.

The input box disappears when maxTags is reached, but doesn't reappear when you use backspace to delete tags

Works great in Chrome, but IE8 (that we are forced to use at work) throws the following error:
"Message: Object doesn't support this property or method
Line: 246
Char: 7
Code: 0
"

My code:
$(function() {
$(".tagManager").tagsManager({
CapitalizeFirstLetter: true,
preventSubmitOnEnter: true,
delimeters: [44, 188, 13],
backspace: [],
prefilled: [ "Tag 1", "Tag 2", "Tag 3", "Tag 4" ],
hiddenTagListName: 'hiddenTagListA'

  });

});

If the name of the hidden input fields contains punctuation characters, such as a field named "report.tags", the selector used to check for its existence causes a JS error.

This can be fixed if the selector includes a pair of double quotes around the name:

•    var hiddenTag = $("input[name=" + tagManagerOptions.hiddenTagListName + "]");
  

•    var hiddenTag = $('input[name="' + tagManagerOptions.hiddenTagListName + '"]');
  

Thanks for this useful tool!

-- Simon

Hi there!

I tried to use the latest version from github, but I get this error with IE8:

"Message: Object doesn't support this property or method
Line: 284
Char: 13
Code: 0
"

My code:
$('input[data-imagename="'+responseJSON.uploadName+'"]').tagsManager({
typeahead: true,
typeaheadAjaxSource: '../../index.php?ep_function=get_global_tags',
blinkBGColor_1: '#FFFF9C',
blinkBGColor_2: '#CDE69C',
maxTags: 5,
hiddenTagListName: 'hiddenTagList_'+filename[0],
validator : function(tag) {
if(tag.match(/^([\w\s]|[öÖüÜäÄß'*#.+&$]){2,30}$/gi).length>0) {
return true;
}
else
return false;
}
});

Does anyone know how to fix it? Thanks in advance.

Steps to reproduce:

• Enter text, drop down appears and first item is auto-selected
• Click outside the dropdown window
• Selected word is appended to the tag list

What should happen:

The dropdown should be closed and the word not appended to the tag list. Similar to pressing escape.

When typing with polling on the same request gets made lots of times.

I've modified ajaxPolling to send the user input to the typeaheadAjaxSource,

var ajaxPolling = function (query, process) {
var user_input = jQuery(obj).val();
user_input = trimTag(user_input);

  jQuery.ajax({
      url: tagManagerOptions.typeaheadAjaxSource, 
      dataType: 'json',
      success: function (data) {
                var sourceAjaxArray = [];
                if (data != undefined && data.tags != undefined) {
                  sourceAjaxArray.length = 0;
                  jQuery.each(data.tags, function (key, val) {
                    var a = 1;
                    sourceAjaxArray.push(val.tag);
                  });
                  process(sourceAjaxArray);
                };
              },
       data: {typeahead:user_input},
       method: 'POST'
  });
};

I'm using tagmanager on a bootstrap modal, I'd like to reset the tagmanager each time the modal is displayed.

What's the best way to reset the tagmanager?

When I open bootstrap dialog and init tagsManager it shows behind the dialog, default modal z-index is 1050, but setting higher z-index is not a hack, better if typeahead would be added after input field and not to the end on the document body

I want the text in the input put yo be sent to my typeaheadAjaxSource. What do I need to do. I can not see that I am sending anything. No data in PHP's $_GET nor $_POST.

Can you help?

SMALL BUG REGARDING: "blinkBGColor_1 & blinkBGColor_2. When a duplicate tag is entered the user is notified with a blinking of the corresponding (duplicate) tag, here you can configure the colors." This doesn't work as is, I changed line 202 from this jQuery(objName + "" + pTagId).stop() to this: jQuery("#" + objName + "" + pTagId).stop(), and also added this script tag to my html page to get the background animation to work: src="//code.jquery.com/color/jquery.color-git.js"

great plugin that actually works :)

the only thing that I noticed is that you're naming the hidden field with the same name for every instance "hiddenTagList". i would recommend to have this as an option and let users define what the name should be per instance, defaulting to "hiddenTagList"

Thought it would be nice to have events for when a tag is either added or removed.

It's probably worth mentioning in the documentation (blog) that if you are going to have multiple instances of tag manager on a page, each input field must have a unique name, not just a unique ID.

If the fields aren't given a unique name popTag() always removes from the first instance, causing one to scratch one's head.