Using Bootstrap Tags Input to work

Profile picture for mim
mim

I have been trying to use Bootstrap Tags Input like the example from this link: http://timschlechter.github.io/bootstrap-tagsinput/examples/ This is my code:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap Tags Input</title>

    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.css" />
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
   <!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" /> -->
    <link rel="stylesheet" href="libs/bootstrap-tagsinput.css" />

   
  </head>

  <body>
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />

 <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="libs/bootstrap/js/bootstrap.min.js"></script>
     <script src="libs/bootstrap-tagsinput.js"></script>
     <script src="libs/bootstrap-tagsinput-angular.js"></script>
     <script src="libs/typeahead.bundle.js"></script>
  </body>

</html>

But the code does not seem to work. Any ideas or thought on how to make this work? Thanks!

Without seeing what's in your lib folder, it's impossible for us to know what's going wrong.

If you use appropriate CDN's for all of the libraries then everything will work correctly:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Bootstrap Tags Input</title>

  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.css" />
  <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" />
</head>
<body>

  <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />

  <script src="http://code.angularjs.org/1.2.15/angular.js" ></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <script src="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.js"></script>
  <script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput-angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
</body>
</html>

Demo in Plunker

That said, you have a lot of conflicting libraries here. Are you using ng-tags-input or bootstrap-tagsinput or bootstrap-tagsinput-angular? You should pick one and pick a development strategy around it to avoid conflicts.

For instance, these are the only libraries actually being used in the above example:

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script>