Search code examples
javascriptreferenceerror

ReferenceError: Taggle is not defined

I'm not understanding after including all the necessary libraries why I'm getting this error in firebug console?

My HTML code is as follows :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">    
    <link rel="stylesheet" href="formoid_files/formoid1/formoid-default-skyblue.css" type="text/css" />
    <link href="http://localhost/smart/web/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://localhost/smart/web/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet">
    <link href="http://localhost/smart/web/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://localhost/smart/web/css/ui-lightness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet">
    <link href="http://localhost/smart/web/css/base-admin-3.css" rel="stylesheet">
    <link href="http://localhost/smart/web/css/base-admin-3-responsive.css" rel="stylesheet">
    <link href="http://localhost/smart/web/css/pages/plans.css" rel="stylesheet"> 
    <link href="http://localhost/smart/web/css/custom.css" rel="stylesheet">
    <link href="http://localhost/smart/web/css/bootstrap-multiselect.css" rel="stylesheet">
    <link href="http://localhost/smart/web/css/prettify.css" rel="stylesheet">
    <link href="http://localhost/smart/web/css/datepicker.css" rel="stylesheet">
    <link href="http://localhost/smart/web/css/projects.min.css" rel="stylesheet">
    <link href="http://localhost/smart/web/css/taggle.min.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <style type="text/css">
    .account-container1 {
      width: 505px; 
      display: block;
      margin: 60px auto 0 auto;
      background: #f9f9f9;
      border: 1px solid #d5d5d5;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }
    .account-container1 h1 {
      margin-bottom: 0.4em;
      color: #F90;
      font-size: 32px;
    }
    </style>
    <div class="main"> 
      <div class="account-container1 stacked">
        <div class="content clearfix">
          <form action="contact_us.php" id="contact_us_form" role="form" class="form-horizontal col-md-12" method="post">
            <h1>Admin Settings</h1>
            <fieldset>
              <div class="form-group">
                <label for="email" class="col-lg-2">Email :<span style="color:#FF0000">*</span></label>
                <div class="col-lg-10">              
                  <div class="input textarea clearfix custom stackoverflow"></div>
                </div>
              </div>          
              <div align="center"  class="login-actions">
                <input type="submit" style="float:right" class="login-action btn btn-primary" name='submit' value="Send">
              </div> <!-- .actions -->
            </fieldset>
          </form>
        </div> <!-- /content -->  
      </div> <!-- /account-container -->
    </div>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://localhost/smart/web/js/libs/jquery-1.9.1.min.js"></script>
    <script src="http://localhost/smart/web/js/libs/jquery-ui-1.10.0.custom.min.js"></script>
    <script src="http://localhost/smart/web/js/custom/jquery-1.10.1.js"></script>
    <script src="http://localhost/smart/web/js/custom/jquery-ui.js"></script>
    <script src="http://localhost/smart/web/js/libs/bootstrap.min.js"></script>
    <script src="http://localhost/smart/web/js/plugins/validate/jquery.validate.js"></script>
    <script src="http://localhost/smart/web/js/Application.js"></script>
    <script src="http://localhost/smart/web/js/demo/validation.js"></script>
    <script src="http://localhost/smart/web/js/bootstrap-multiselect.js"></script>
    <script src="http://localhost/smart/web/js/prettify.js"></script>
    <script src="http://localhost/smart/web/js/custom/common.js"></script>
    <script src="http://localhost/smart/web/js/bootstrap-datepicker.js"></script>
    <script src="http://localhost/smart/web/js/custom/typeahead.js"></script>
    <script src="http://localhost/smart/web/js/custom/rainbow-custom.min.js"></script>
    <script src="http://localhost/smart/web/js/custom/scripts.js"></script>
    <script src="http://localhost/smart/web/js/custom/taggle.js"></script>
    <script src="http://localhost/smart/web/js/custom/taggle-ie8.js"></script>
    <script src="http://localhost/smart/web/js/custom/taggle-ie9.js"></script>
    <script language="javascript"></script>
  </body>
</html>

The jQuery code is as follows from the file script.js:

/*global Taggle*/
(function() {
  new Taggle($('.stackoverflow.textarea')[0], {
    tags: ['or', 'like', 'stackoverflow']
    });
}());

When I try to add tags to the text area with class stack overflow I'm getting the following error in firebug console :

ReferenceError: Taggle is not defined     new Taggle($('.stackoverflow.textarea')[0], {
Solution

  • You are loading script.js before loading taggle.js, which means you're trying to use an object that hasn't been defined yet.

    Try moving the <script src="http://localhost/smart/web/js/custom/scripts.js"></script> line after the other <script... lines.