Error Using a plugin after installing it with Bower

Question

I'm a newbie (intern), and I'm working on a bootstrap/jquery environment.

I'm trying to add a password strength feature to my website's login app. In my login app folder (contact_sid) I've installed the pwdstrength plugin using bower. The files are stored in bower_components.

Now, I'm trying to use the pwstrength() function in my main.js file. As shown on github, I invoke the plugin using $(':password').pwstrength(); When I run the app, I get an error:

Uncaught TypeError: $(...).pwstrength is not a function

Any help would be really appreciated. I think if I copy the pwdstrength.js function inside my main.js, it works (kinda), but it's obviously bad practice.

Answer 1

The error you're receiving means that your plugin hasn't been loaded, so you're trying to call a function that doesn't exist.

Ensure that you have loaded/load "pwstrength" before calling it with jQuery, like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/bower_components/pwstrength.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>

Check out the examples on GitHub to see how the author intended its usage.

Also, welcome to Stack Overflow. Nothing wrong with being an intern; everyone starts somewhere! :)