Tag-it.js not working

Question

Tag-it.js not working

Navigation

#1 by (1 votes)

1

I'm trying to get this example from Tag-it.js

I use the external files that it says in the Example.

<link href="http://aehlke.github.io/tag-it/css/jquery.tagit.css" rel="stylesheet">
<script src="http://aehlke.github.io/tag-it/js/tag-it.js"></script>

Also the ones documentation from Tag-it.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>

My source code is all in a single .html file, if someone has already worked with Tag-it, or help me find the error and why it does not react to the input, I write and tags do not come out, let alone filter the table.

Source code:

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href="http://aehlke.github.io/tag-it/css/jquery.tagit.css" rel="stylesheet">

  <script src="http://aehlke.github.io/tag-it/js/tag-it.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      myTags = $('#myTags');
      myTags.tagit({
        afterTagAdded: function(evt, ui) {
          if (!ui.duringInitialization) {
            search();
          }
        },
        afterTagRemoved: function(evt, ui) {
          search();
        }
      });
      var search = function() {
        if ($('.tagit-label').length) {
          $("#table tbody tr").fadeOut();
          var toShow = [];
          $('.tagit-label').each(function() {
            filter = $(this).text();
            $("#table tbody tr").each(function() {
              if ($(this).text().search(new RegExp(filter, "i")) > 0) {
                toShow.push($("#table tbody tr").index(this));
              }
            });
          });
          $(toShow).each(function(i, value) {
            $("#table tbody tr").eq(value).fadeIn();
          });
        } else {
          $("#table tbody tr").fadeIn();
        }
      }
    });
  </script>
  <style type="text/css">
    body {
      padding: 20px;
    }
    
    input {
      margin-bottom: 5px;
      padding: 2px 3px;
      width: 209px;
    }
    
    td {
      padding: 4px;
      border: 1px #CCC solid;
      width: 100px;
    }
  </style>
</head>

<body>
  <input type="text" id="myTags">
  <table class="table-striped" id="table">
    <thead>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>Green</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Grapes</td>
        <td>Green</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Green</td>
        <td>Orange</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

javascript jquery

asked by Benny BuAc 03.08.2017 в 01:01

source

1 answer

Google Maps Android API NullPointerException inserts svg code on canvas

score 1 · Accepted Answer

Tag-it is a plugin for jQuery UI, that means it should be included in the project after from jQuery and jQuery UI, but you're importing it at the beginning as the first script. You have to move it right after you import jQuery UI.

Another problem is that on the JSFiddle page, the jQuery UI styles are being included (it is done automatically when selecting jQuery UI in the JavaScript section, which can be confusing), that you are not including in your code:

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

Put them and so the input will look better with the edges and everything.

With those two changes (move tag-it.js after jQuery UI, and add the CSS styles of jQuery UI), the code already works without problems:

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href="https://aehlke.github.io/tag-it/css/jquery.tagit.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://aehlke.github.io/tag-it/js/tag-it.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      myTags = $('#myTags');
      myTags.tagit({
        afterTagAdded: function(evt, ui) {
          if (!ui.duringInitialization) {
            search();
          }
        },
        afterTagRemoved: function(evt, ui) {
          search();
        }
      });
      var search = function() {
        if ($('.tagit-label').length) {
          $("#table tbody tr").fadeOut();
          var toShow = [];
          $('.tagit-label').each(function() {
            filter = $(this).text();
            $("#table tbody tr").each(function() {
              if ($(this).text().search(new RegExp(filter, "i")) > 0) {
                toShow.push($("#table tbody tr").index(this));
              }
            });
          });
          $(toShow).each(function(i, value) {
            $("#table tbody tr").eq(value).fadeIn();
          });
        } else {
          $("#table tbody tr").fadeIn();
        }
      }
    });
  </script>
  <style type="text/css">
    body {
      padding: 20px;
    }
    
    input {
      margin-bottom: 5px;
      padding: 2px 3px;
      width: 209px;
      border:1px solid gray;
    }
    
    td {
      padding: 4px;
      border: 1px #CCC solid;
      width: 100px;
    }
  </style>
</head>

<body>
  <input type="text" id="myTags">
  <table class="table-striped" id="table">
    <thead>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>Green</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Grapes</td>
        <td>Green</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Green</td>
        <td>Orange</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Note: I have changed the sources of some files to HTTPS so that they work without problems in the snippet. And I would recommend that you change to a more modern version of jQuery. The one you use now (1.5.2) is really old. It would be good if you could consider a more modern one (the JSFiddle uses 1.9.1).