2012-12-22 17 views
5

मैं अपने स्वयं के django प्रोजेक्ट में इसे कार्यान्वित करने की कोशिश करते समय एक पायथन-डीजेंगो ऐप के साथ एक जेएस/Jquery समस्या डीबग करने का प्रयास कर रहा हूं। मैं अपने ब्राउज़र के डेवलपर्स सांत्वना का उपयोग किया है निम्न त्रुटि को पुनः प्राप्त करने: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(); 
}); 

मुझे जावास्क्रिप्ट या jquery के बारे में बहुत कुछ पता नहीं है, इसलिए मैं पूरी तरह से यहां एक नुकसान में हूं। मान लीजिए कि सिंथेटिक रूप से गलत कुछ भी नहीं है, क्या इस तरह की समस्या यह दर्शाती है कि jquery सही ढंग से काम नहीं कर रहा है? मुझे पता है कि यह जाने के लिए बहुत सारी जानकारी नहीं है, लेकिन मैं आवश्यक कोई अन्य प्रासंगिक जानकारी जोड़ूंगा।

एप्लिकेशन और विशिष्ट फ़ाइल मुझे परेशानी दे रही है यहाँ (क्रमशः) कर रहे हैं,

मैं अपने आप परीक्षण परियोजना के साथ आवेदन परीक्षण किया है मेरे विकास सर्वर पर, और यह अपने स्वयं के परीक्षण प्रोजेक्ट के साथ बॉक्स से बाहर काम करता है। हालांकि, अगर मैं एक वर्किंग टेस्ट ऐप लेता हूं और इसे अपने स्वयं के डीजेंगो-प्रोजेक्ट में इंस्टॉल करता हूं तो यह अब काम नहीं करता है।

अद्यतन:

पूरे समारोह परिभाषा:

$.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'); 
} 

एचटीएमएल (शामिल)

<!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 पोर्टेबल। यह सिर्फ परीक्षण के लिए है।

$.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(); 
}); 

मुझे लगता है कि आप कोड में इनपुट या चयन टैग संदर्भ याद कर रहे हैं

+0

क्या आप $ .fn.yourlabsWidget() के लिए कार्यान्वयन प्रदान कर सकते हैं? – nekman

+0

मुझे लगता है कि कार्यान्वयन से आपका मतलब फ़ंक्शन के लिए कोड है। जरुर हो सकता है। मैं सवाल अपडेट करूंगा। यदि आपका मतलब यह नहीं है, तो कृपया मुझे बताएं और मैं सही कर दूंगा। – Jglstewart

+0

यदि 'अपने स्वयं के टेस्ट प्रोजेक्ट में बॉक्स से बाहर काम करता है' तो यह स्पष्ट नहीं है कि आपको – charlietfl

उत्तर

0

आप इस तरह की कोशिश की है। देखना है कि अगर यह काम करता है

+0

ठीक है, जब मैं ऐसा करता हूं तो त्रुटि दूर हो जाती है, लेकिन मेरा एप्लिकेशन अभी भी काम नहीं करता है। मुझे सच में विश्वास नहीं है कि कोड के साथ कोई समस्या है, क्योंकि मैंने अपने विकास सर्वर पर अपनी खुद की टेस्ट प्रोजेक्ट के साथ एप्लिकेशन का परीक्षण किया है, और यह बॉक्स के बाहर अपने स्वयं के टेस्ट प्रोजेक्ट में काम करता है। मैं इसे प्रश्न में जोड़ दूंगा। – Jglstewart

+0

अद्यतन उत्तर देखें, उम्मीद है कि यह मदद करता है। इनपुट के लिए – Jai

+0

धन्यवाद। दूसरा विकल्प मुझे एक ही त्रुटि दे रहा है। – Jglstewart

3

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

इसका मतलब है कि $(this).yourlabsWidget अनिर्धारित रहता है।

आप jQuery दो बार लोड कर रहे हैं:

  • jQuery भरी हुई है
  • स्वत: पूर्ण प्लगइन jQuery में लोड किया जाता
  • jQuery फिर से भरी हुई है
  • यह स्वत: पूर्ण प्लगइन
नहीं है
+0

यह सही जवाब है! आपका base.html और अन्य विस्तारित HTML फ़ाइलें jQuery को कॉल कर सकती हैं –

संबंधित मुद्दे