Jquery Javascript Function Undefined

Question

I am trying to debug a JS/Jquery problem with a python-django app while trying to implement it in my own django project. I've used my browser's developers console to retrieve the following error:

TypeError: 'undefined' is not a function (evaluating '$(this).yourlabsWidget()')

So I went to look for where the function 'yourlabsWidget() was defined, and it is directly above where the function call is.

$.fn.yourlabsWidget = function(overrides) { ... }

$(document).ready(function() {
$('.autocomplete-light-widget[data-bootstrap=normal]').live('initialize', function() {
     $(this).yourlabsWidget();
});

I don't know much about javascript or jquery, so I'm completely at a loss here. Assuming there is nothing syntactically wrong, would a problem like this imply that jquery is not working correctly? I know this isn't a lot of information to go by, but I will add any other relevant info required.

The app and specific file giving me trouble are here (respectively),

I've tested the application with it's own test project on my development server, and it works out of the box with in it's own test project. However, if I take a working test app and install it to my own django-project it no longer works.

UPDATE:

Entire function definition:

$.fn.yourlabsWidget = function(overrides) {
var overrides = overrides ? overrides : {};

if (this.data('widget') == undefined) {
    // Instanciate the widget
    var widget = new yourlabs.Widget(this);

    // Pares data-*
    var data = this.data();
    var dataOverrides = {autocompleteOptions: {}};
    for (var key in data) {
        if (!key) continue;

        if (key.substr(0, 12) == 'autocomplete') {
            var newKey = key.replace('autocomplete', '');
            newKey = newKey.replace(newKey[0], newKey[0].toLowerCase())
            dataOverrides['autocompleteOptions'][newKey] = data[key];
        } else {
            dataOverrides[key] = data[key];
        }
    }

    // Allow attribute overrides
    widget = $.extend(widget, dataOverrides);

    // Allow javascript object overrides
    widget = $.extend(widget, overrides);

    this.data('widget', widget);

    // Setup for usage
    widget.initialize();

    // Widget is ready
    widget.widget.attr('data-widget-ready', 1);
    widget.widget.trigger('widget-ready');
}

return this.data('widget');
}

HTML (INCLUDES)

<!DOCTYPE html>
<html lang="en-us" >
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css" />
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/static/admin/css/ie.css"     /><![endif]-->

<script type="text/javascript">window.__admin_media_prefix__ = "/static/admin/";</script>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="/static/autocomplete_light/autocomplete.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/widget.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/addanother.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/text_widget.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/remote.js"></script>
<link rel="stylesheet" type="text/css" href="/static/autocomplete_light/style.css" />

HTML FORM:

<span class="autocomplete-light-widget customer_order_products_set-0-product_id
single"
id="id_customer_order_products_set-0-product_id-wrapper"
data-max-values="1" data-bootstrap="normal"
data-autocomplete-url="http://127.0.0.1:8000/autocomplete/InventoryAutocomplete/" data-autocomplete-choice-selector="[data-value]" data-autocomplete-placeholder="THIS IS WORKING"
>

NOTE: I know the URL is not portable. It's just for testing.

Can you provide the implementation for $.fn.yourlabsWidget() ? — nekman, Dec 22 '12 at 17:55
I think by implementation you mean the code for the function. Sure can. I'll update the question. If that's not what you meant, please let me know and I'll correct. — Jglstewart, Dec 22 '12 at 18:14
if `works out of the box with in it's own test project` not clear what is different when you get error — charlietfl, Dec 22 '12 at 18:42
Exactly my problem, I was hoping there was something I didn't understand about the way javascript handles it's function definitions and maybe someone would recognize right away that the problem must be related to a script not being loaded properly, or something must be out of order. — Jglstewart, Dec 22 '12 at 18:45

score 3 · Answer 1 · answered Jan 30 '13 at 15:29

3

$(this).yourlabsWidget() undefined is not a function

This means that $(this).yourlabsWidget is undefined.

You are loading jQuery twice:

jQuery is loaded
autocomplete plugin is loaded into jQuery
jQuery is loaded again
it doesn't have the autocomplete plugin

answered Jan 30 '13 at 15:29

jpic

32,891
5
112
113

This is the right answer! Your base.html and other extended html files might be calling jQuery – Mevin Babu Nov 20 '14 at 19:25

Jai · Answer 2 · 2012-12-22T18:34:38.997

0

have you tried this way:

$.fn.yourlabsWidget = function(overrides) { ... };
$(document).ready(function() {
    $('body').on('load', function() {
       $('.autocomplete-light-widget input[data-bootstrap=normal]').yourlabsWidget();
    });
});

or you can try this one too:

$(document).ready(function() {
   $('.autocomplete-light-widget input[data-bootstrap=normal]').yourlabsWidget();
});

I guess you are missing the input or select tag reference in the code. see if this works

edited Dec 22 '12 at 18:34

answered Dec 22 '12 at 17:59

Jai

74,255
12
74
103

Well, the error goes away when I do that, but my application still doesn't work. I don't really believe there is a problem with the code itself, since I've tested the application with it's own test project on my development server, and it works out of the box with in it's own test project. I'll add that to the question. – Jglstewart Dec 22 '12 at 18:09
thanks for the input. The second option is giving me the exact same error. – Jglstewart Dec 22 '12 at 18:22
I guess you are missing the input or select tag reference in the code. **plz provide the tag**, i assumed here ****. – Jai Dec 22 '12 at 18:35
I apologize Jai, I'm not sure to what you are referring. I'm trying not to overload on code because I don't really think the problem is specifically related to the code itself, as it works fine when included in the test application. I was hoping there were issues I was unaware of related javascript and the jquery library that would cause a function to be undefined. I'll bump up more code in the question if it might help. – Jglstewart Dec 22 '12 at 18:45
sure can you paste the html related to this? – Jai Dec 22 '12 at 18:53
Posted the related HTML in the Question. – Jglstewart Dec 22 '12 at 20:05

Jquery Javascript Function Undefined

2 Answers2