CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-tags-input
AxleWack
AxleWack

Reputation: 1911

Bootstrap tagsinput not working

I just came across Bootstrap tagsinput and I am trying it out, but I cant seem to get it working.

I added the following at the top of my layout :

<link rel="stylesheet" href="~/Scripts/bootstrap_tagsinput/bootstrap-tagsinput.css">

And I added the following at the bottom of my layout :

<script src="~/Scripts/bootstrap_tagsinput/bootstrap-tagsinput.js"></script>

Then in my partial page I added the following :

<input type="text" value="" data-role="tagsinput" id="tags" class="form-control">

Below is an image of what is happening, instead of the tags showing:

enter image description here

To my understanding, this should work. What am I missing ?

Upvotes: 6

Views: 11411

Answers (4)

Moch Zawaruddin Abdullah
Moch Zawaruddin Abdullah

Reputation: 111

it's because old style using bootstrap class "label label-info". Try to change into "badge badge-info" class

$('.tags').tagsinput({
     tagClass: 'badge badge-info'
 });

Upvotes: 0

Nick.Mc
Nick.Mc

Reputation: 19184

I think that because it's a partial view and it appears after the library is loaded, it doesn't get applied.

I had exactly the same problem. My Index page had all the libraries included but the partial view never used them.

I had to add this to the partial view Razor to force it to apply after load.

<script>
    $(function () {
        $('input[data-role=tagsinput]').tagsinput();
    }
    );
</script>

Upvotes: 6

Daniel J Abraham
Daniel J Abraham

Reputation: 254

Add this links in your page 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

DEMO

Bootstrap - tagsinput , Github - Reference

Upvotes: 4

Maheskumar Subramani
Maheskumar Subramani

Reputation: 69

did you initialized your input like 

$('input').tagsinput({
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    valueKey: 'name',
    source: citynames.ttAdapter()
  }
});

Upvotes: 1

Related Questions