CODEWITHSUNDEEP
javascripttwitter-bootstraptags
randombits
randombits

Reputation: 48450

customizing html templating in bootstrap tags

I'm taking a looking at bootstrap tags found here: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

I'd like to be able to hook into the HTML that's being rendered to add additional anchors/links to the tags being generated. There is an event named: beforeItemAdd() that allows you to see the item before it's added, but you can't necessarily interact with it other than prevent it from being rendered.

Is there a way to customize the HTML output here so I can add additional links besides the 'x' to my tag? Just applying a CSS class won't work, I need to be able to modify the actual markup being rendered so I can add content to the tags.

Alternatively, I'm open to a solution with tagging that allows for the customizing of tag HTML rendering.

Upvotes: 0

Views: 65

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Without digging really deep into the plugin source ( I've never used this plugin), or figuring out what data is stored, one way would be to use this in the event callback to traverse to the main container the plugin wraps everything in and then find the tag elements.

Add a class each time and then you know what you have already modified and the one without that class would be your new one

$('input').on('itemAdded', function(event) {
  var $cont = $(this).siblings('.bootstrap-tagsinput'),
      $tag = $cont.find('.tag').not('.modified').addClass('modified');
      $tag.doSomeStuff();      
});

Upvotes: 1

Related Questions