Menu
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),
https://github.com/yourlabs/django-autocomplete-light/
https://github.com/yourlabs/django-autocomplete-light/blob/docs_rewrite/autocomplete_light/static/autocomplete_light/widget.js
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.
292
$(this).yourlabsWidget()undefined is not a function
This means that $(this).yourlabsWidget is undefined.
You are loading jQuery twice:
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
