2014-05-18 8 views
27

की संपत्ति 'toLowerCase' नहीं पढ़ सकता है मुझे यह त्रुटि मिल रही है और यह jquery ढांचे से उत्पन्न हो रहा है। जब मैं दस्तावेज़ पर एक चयन सूची लोड करने का प्रयास करता हूं तो मुझे यह त्रुटि मिलती है। मुझे लगता है कि मुझे यह त्रुटि क्यों मिल रही है।अनकही टाइपरर: अपरिभाषित

यह परिवर्तन घटना के लिए काम करता है, लेकिन मैन्युअल रूप से फ़ंक्शन निष्पादित करने का प्रयास करते समय मुझे त्रुटि मिल रही है।

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined -> jquery-2.1.1.js:7300

यहाँ कोड

$(document).ready(function() { 
    $("#CourseSelect").change(loadTeachers); 
    loadTeachers(); 
}); 

function loadTeachers() { 
    $.ajax({ 
     type: 'GET', 
     url: '/Manage/getTeachers/' + $(this).val(), 
     dataType: 'json', 
     cache: false, 
     success:function(data) { 
      $('#TeacherSelect').get(0).options.length = 0;  
      $.each(data, function(i, teacher) { 
       var option = $('<option />'); 
       option.val(teacher.employeeId); 
       option.text(teacher.name); 
       $('#TeacherSelect').append(option); 
      }); 
     },   
     error: function() { 
      alert("Error while getting results"); 
     } 
    }); 
} 

उत्तर

27

जब आप loadTeachers() पर DOMReady पर कॉल करते हैं तो this का संदर्भ #CourseSelect तत्व नहीं होगा।

आप डोम के लोड पर #CourseSelect तत्व पर एक change() घटना को ट्रिगर करके इसे ठीक कर सकते हैं:

$("#CourseSelect").change(loadTeachers).change(); // or .trigger('change'); 

वैकल्पिक रूप से $.proxy उपयोग कर सकते हैं संदर्भ समारोह के अधीन ही कार्य को बदलने के लिए:

$("#CourseSelect").change(loadTeachers); 
$.proxy(loadTeachers, $('#CourseSelect'))(); 

या उपरोक्त के वेनिला जेएस समकक्ष, bind():

$("#CourseSelect").change(loadTeachers); 
loadTeachers.bind($('#CourseSelect')); 
2

यह विफल रहता है "when trying to execute the function manually" क्योंकि आप एक अलग 'यह' है। यह मैन्युअल रूप से विधि का आविष्कार करते समय आपके मन में जो चीज है, उसे संदर्भित नहीं करेगा, लेकिन कुछ और, शायद विंडो ऑब्जेक्ट, या मैन्युअल रूप से आवेषण करते समय आपके पास जो भी संदर्भ वस्तु है।

1

यह है जब आप का उपयोग $(this).val() जब यह invoker को this अंक परिवर्तन घटना से बुलाया अर्थात CourseSelect तो यह काम कर रहा है और जाता है और CourseSelect का मूल्य मिल जाएगा त्रुटि होती है। लेकिन जब आप इसे मैन्युअल रूप से this दस्तावेज़ पर दस्तावेज़ कहते हैं। इसलिए आपको CourseSelect ऑब्जेक्ट को पास करना होगा या $(this).val() के बजाय $("#CourseSelect").val() की तरह सीधे पहुंचना होगा।

12

मुझे एक ही समस्या थी, मैं कुछ चुनिंदा बदलावों को बदलने की कोशिश कर रहा था और असल में समस्या यह थी कि मैं ईवेंट की बजाय ईवेंट का उपयोग कर रहा था। लक्ष्य जो कि ऑब्जेक्ट है।

गलत:

$(document).on('change', $("select"), function(el) { 
    console.log($(el).val()); 
}); 

सही:

$(document).on('change', $("select"), function(el) { 
    console.log($(el.target).val()); 
}); 
+0

मेरी विशेष मामले में के साथ एक समारोह में, मैं "$ (this) बदलने के लिए .val() था, " "$ (this.target) .val();" –

+0

'$ (यह) .val()' एक सही उपयोग भी होगा –

+0

लेकिन अगर हम इसकी मदद कर सकते हैं तो हम 'इस' का उपयोग करने से बचना चाहते हैं। 'इस' का उपयोग करके कोड को बनाए रखना अधिक कठिन हो जाता है। – Bobort

0

अपने $ (this) .val(), अपने ajax कॉल में कोई गुंजाइश नहीं है क्योंकि इसके परिवर्तन में नहीं घटना समारोह दायरा

क्या आप अपने परिवर्तन कार्यक्रम में पहले एजेक्स कॉल को लागू कर सकते हैं, उस स्थिति में यह ठीक काम करता है। लेकिन जब आपने कोई फ़ंक्शन बनाया और उस ईवेंट को उस ईवेंट में बुलाया, तो $ (इस) .val() के लिए दायरा मान्य नहीं है।

बस आईडी चयनकर्ता का उपयोग करने के बजाय

$(#CourseSelect).val() 

पूरे कोड इस तरह होना चाहिए मूल्य प्राप्त:

$(document).ready(function() 
{ 
    $("#CourseSelect").change(loadTeachers); 
    loadTeachers(); 
}); 

function loadTeachers() 
{ 
    $.ajax({ type:'GET', url:'/Manage/getTeachers/' + $(#CourseSelect).val(), dataType:'json', cache:false, 
     success:function(data) 
     { 
      $('#TeacherSelect').get(0).options.length = 0;  

      $.each(data, function(i, teacher) 
      { 
       var option = $('<option />'); 
       option.val(teacher.employeeId); 
       option.text(teacher.name); 
       $('#TeacherSelect').append(option); 
      }); 
     }, error:function(){ alert("Error while getting results"); } 
    }); 
} 
2

यह मेरे लिए काम करता !!!

कॉल पैरामीटर के बिना एक समारोह

$("#CourseSelect").change(function(e1) { 
    loadTeachers(); 
}); 

कॉल पैरामीटर

$("#CourseSelect").change(function(e1) { 
    loadTeachers($(e1.target).val()); 
}); 
संबंधित मुद्दे