5

自分の django プロジェクトに実装しようとしているときに、python-django アプリで JS/Jquery の問題をデバッグしようとしています。ブラウザーの開発者コンソールを使用して、次のエラーを取得しました。

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

そこで、関数 'yourlabsWidget() が定義されている場所を探しに行きました。それは、関数呼び出しがある場所のすぐ上にあります。

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

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

私はjavascriptやjqueryについてあまり知らないので、ここで完全に途方に暮れています。構文的に問題がないと仮定すると、このような問題は jquery が正しく機能していないことを意味しますか? これは多くの情報ではないことはわかっていますが、必要なその他の関連情報を追加します。

私に問題を引き起こしているアプリと特定のファイルはここにあります（それぞれ）、

開発サーバーで独自のテスト プロジェクトを使用してアプリケーションをテストしましたが、独自のテスト プロジェクトでそのまま使用できます。ただし、動作中のテスト アプリを自分の django プロジェクトにインストールすると、動作しなくなります。

アップデート：

関数定義全体:

$.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 (インクルード)

<!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フォーム:

<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"
>

注: URL が移植可能でないことはわかっています。テスト用です。

4

2 に答える 2

3

$(this).yourlabsWidget()undefined は関数ではありません

これは$(this).yourlabsWidgetが定義されていないことを意味します。

jQuery を 2 回読み込んでいます:

  • jQueryが読み込まれます
  • オートコンプリート プラグインは jQuery に読み込まれます
  • jQuery が再度読み込まれます
  • オートコンプリート プラグインがありません
于 2013-01-30T15:29:46.683 に答える
0

この方法を試しましたか：

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

または、これも試すことができます：

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

コードに入力または選択タグの参照が欠落していると思います。これが機能するかどうかを確認します

于 2012-12-22T17:59:16.583 に答える