Jquery - type error, is not a function

Question

I am working on a widget that is embedded on a customers website, it loads a jquery file. however we need to detect if jquery is already loaded on a customers page to avoid conflicts and then not load our own jquery.

As a sidenote the widget works on all versions of jquery. The code being used is...

 if (typeof jQuery == 'undefined') {
 console.log("NOT LOADED");
 scripts.push("https://d33f10u0pfpplc.cloudfront.net/perun/v1/js/widget/betaV2/jquery-1.8.2-min.js");
 }

This works when tested locally, however when it was rolled out on some sites we got a ...

type error $tabs(...) is not a function

it seems that the jquery on the host sites must not have been fully loaded is my initial theory (could be wrong)

is there a way to improve the jquery detection used above? or if you know why it is not working i am happy to learn. thanks

check this out http://stackoverflow.com/questions/1828237/check-if-jquery-has-been-loaded-then-load-it-if-false — Vinay Pratap Singh Bhadauria, Mar 10 '14 at 10:34
can I know how did you include your js file ? is it from your local js scripts folder or from google cdn or from jquery site ? — coder, Mar 10 '14 at 10:36
in your js not have a $tabs(...) function.you need to add jquery_ui js file . — Mr.G, Mar 10 '14 at 11:11

score 2 · Answer 1 · answered Mar 10 '14 at 10:35

2

First of all, $tabs is not a standard jQuery function. If it's part of a plugin, you need to make sure that's included as well.

Also make sure that jQuery isn't being run in noConflicts mode. In that case, jQuery may be defined, but not $.

answered Mar 10 '14 at 10:35

David Hedlund

128,221
31
203
222

score 1 · Answer 2 · answered Mar 10 '14 at 10:50

Do you check the loading state of the browser? Javascript is typically executed at the time, when the browser is parsing it. Jquery is a bigger file and sometimes it will execute upcoming code first.

To solve it, verify that your own code is executed after dom is loaded:

$(function() {
    // your code here
});

Alternative 2 is to check what

scripts.push()

exactly does. It needs to be asynchronous, just only add the file request does not ensure the file is loaded and parsed. Maybe this is your problem.

Using jQuery in widgets isn't optimal. Is it possible to write it in native js?

score 0 · Answer 3 · answered Mar 10 '14 at 10:48

It's probably not help, but in example at http://www.initializr.com/

jQuery checked like

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

score 0 · Answer 4 · edited Mar 10 '14 at 11:52

0

Please check your jquery version and your version not have a $tabs jquery function.

Then only you got this type error

$tabs(...) is not a function.

Otherwise try new version of jquery_ui file.

edited Mar 10 '14 at 11:52

Sahil Mittal

20,697
12
65
90

answered Mar 10 '14 at 11:15

Mr.G

3,413
2
16
20

Jquery - type error, is not a function

4 Answers4