6
मैं Google App Engine प्रोजेक्ट पर typeahead.js का उपयोग कर रहा हूं और प्रीफ़ेच का उपयोग करने में समस्याएं हैं।typeahead.js prefetch समस्याएं
जब मैं स्थानीय का उपयोग करता हूं तो टाइपहेड ठीक काम करता है लेकिन अगर मैं एक ही डेटासेट को जेएसएस फ़ाइल में कॉपी करता हूं और प्रीफेच का उपयोग करता हूं, तो टाइपहेड काम नहीं करता है, यानी कोई सुझाव प्रदर्शित नहीं होता है।
[{value: 'Abc Def', tokens: ['Abc', 'Def'], name: 'random1', val2: 'A', val3: 'B'}, {value: 'Def Ghi', tokens: ['Def', 'Ghi'], name: 'random2', val2: 'C', val3: 'D'}, {value: 'Ghi Jkl', tokens: ['Ghi', 'Jkl'], name: 'random3', val2: 'E', val3: 'F'}, {value: 'Jkl Mno', tokens: ['Jkl', 'Mno'], name: 'random4', val2: 'G', val3: 'H'}]
:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<div><input type="text" name="typeahead-example" placeholder="Type here" class="typeahead-example"></div>
<script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./js/hogan.js" type="text/javascript"></script>
<script src="./js/typeahead.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('input.typeahead-example').typeahead({
name: 'example',
prefetch: {url: './json/example.json', ttl: '0'},
limit: 3,
valueKey: 'name',
template: '<p>{{value}}</p>',
engine: Hogan
});
});
</script>
</body>
</html>
यहाँ example.json फ़ाइल है:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<div><input type="text" name="typeahead-example" placeholder="Type here" class="typeahead-example"></div>
<script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./js/hogan.js" type="text/javascript"></script>
<script src="./js/typeahead.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('input.typeahead-example').typeahead({
name: 'example',
local: [{value: 'Abc Def', tokens: ['Abc', 'Def'], name: 'random1', val2: 'A', val3: 'B'},
{value: 'Def Ghi', tokens: ['Def', 'Ghi'], name: 'random2', val2: 'C', val3: 'D'},
{value: 'Ghi Jkl', tokens: ['Ghi', 'Jkl'], name: 'random3', val2: 'E', val3: 'F'},
{value: 'Jkl Mno', tokens: ['Jkl', 'Mno'], name: 'random4', val2: 'G', val3: 'H'}],
limit: 3,
valueKey: 'name',
template: '<p>{{value}}</p>',
engine: Hogan
});
});
</script>
</body>
</html>
यहाँ प्रीफ़ेच का उपयोग कर कोड के अपने संस्करण है:
यहाँ स्थानीय का उपयोग कर कोड के अपने संस्करण है क्रोम और फ़ायरफ़ॉक्स में समस्या होती है। क्रोम में डिबगिंग, मैं देख सकता हूं कि example.json फ़ाइल परोसा जाता है और प्राप्त किया जाता है। Example.json के लिए नेटवर्क गतिविधि का पूर्वावलोकन और प्रतिक्रिया फ़ाइल की सामग्री को पूरी तरह से दिखाती है। हालांकि, क्रोम डीबगर के संसाधन खंड पर, स्थानीय संग्रहण खाली है। वहाँ मैं क्रॉस डोमेन मुद्दों कर नहीं कर रहा हूँ और this post के संबंध में, मैं 0 करने के लिए टीटीएल सेट किया है और समस्या अभी भी बनी रहती this post के संबंध में कोई सांत्वना त्रुटियों, तो इस संदेश
XHR finished loading: "http://localhost:8000/json/example.json". jquery-1.10.2.js:8706
send jquery-1.10.2.js:8706
jQuery.extend.ajax jquery-1.10.2.js:8136
jQuery.(anonymous function) jquery-1.10.2.js:8282
jQuery.extend.getJSON jquery-1.10.2.js:8265
c.mixin._loadPrefetchData typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin.initialize typeahead.min.js:7
proxy jquery-1.10.2.js:827
(anonymous function) typeahead.min.js:7
jQuery.extend.map jquery-1.10.2.js:782
g typeahead.min.js:7
jQuery.extend.each jquery-1.10.2.js:657
jQuery.fn.jQuery.each jquery-1.10.2.js:266
b.initialize typeahead.min.js:7
jQuery.fn.typeahead typeahead.min.js:7
(anonymous function) prefetch.html:14
fire jquery-1.10.2.js:3048
self.fireWith jquery-1.10.2.js:3160
jQuery.extend.ready jquery-1.10.2.js:433
completed
कर रहे हैं।
किसी भी मदद की सराहना की जाएगी।
- अद्यतन * @NitzanShaked से सुझाव के जवाब में मैं कुछ सांत्वना प्रवेश गयी।
सबसे पहले मैंने यह कोशिश की और कंसोल में पंजीकृत कुछ भी नहीं।
$(document).ready(function(){
$('input.typeahead-example').typeahead({
name: 'example',
prefetch: {
url: './json/example.json',
ttl: '0',
filter: function (data) {
console.log(data);
for (var i = 0; i < data.length; i++) {
datum = data[i];
console.log(datum);
}
return data;
}
},
limit: 3,
valueKey: 'name',
template: '<p>{{value}}</p>',
engine: Hogan,
});
});
तब मैं इस कोशिश की:
$(document).ready(function(){
$('input.typeahead-example').typeahead({
name: 'example',
prefetch: {url: './json/example.json', ttl: '0'},
limit: 3,
valueKey: 'name',
template: '<p>{{value}}</p>',
engine: Hogan,
}).bind('typeahead:opened', function (obj, datum) {
console.log(obj);
console.log(datum);
console.log(datum.val2);
});
});
कौन सा सांत्वना के रूप में बदल जाता है जब मैं इनपुट क्षेत्र
jQuery.Event {type: "typeahead:opened", timeStamp: 1378502920480, jQuery1102039872112357988954: true, isTrigger: 3, namespace: ""…}
currentTarget: input.typeahead-example tt-query
data: null
delegateTarget: input.typeahead-example tt-query
handleObj: Object
isTrigger: 3
jQuery1102039872112357988954: true
namespace: ""
namespace_re: null
result: undefined
target: input.typeahead-example tt-query
timeStamp: 1378502920480
type: "typeahead:opened"
__proto__: Object
prefetch.html:22
undefined prefetch.html:23
Uncaught TypeError: Cannot read property 'val2' of undefined prefetch.html:24
(anonymous function) prefetch.html:24
jQuery.event.dispatch jquery-1.10.2.js:5095
elemData.handle jquery-1.10.2.js:4766
jQuery.event.trigger jquery-1.10.2.js:5007
(anonymous function) jquery-1.10.2.js:5691
jQuery.extend.each jquery-1.10.2.js:657
jQuery.fn.jQuery.each jquery-1.10.2.js:266
jQuery.fn.extend.trigger jquery-1.10.2.js:5690
c.mixin.trigger typeahead.min.js:7
c.mixin._propagateEvent typeahead.min.js:7
proxy jquery-1.10.2.js:827
d.trigger typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin.open typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin._openDropdown typeahead.min.js:7
proxy jquery-1.10.2.js:827
d.trigger typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin._handleFocus typeahead.min.js:7
proxy jquery-1.10.2.js:827
jQuery.event.dispatch jquery-1.10.2.js:5095
elemData.handle
प्रीफ़ेच डेटासेट ('" उदाहरण "'के लिए' नाम 'निर्दिष्ट करने का प्रयास न करें, यह सुनिश्चित करने के लिए कि यह स्थानीय संग्रहण से नहीं लाया गया है, के बारे में अधिक जानकारी के लिए यहां देखें। –
@NitzanShaked सुझाव के लिए धन्यवाद। कोशिश की लेकिन कोई फर्क नहीं पड़ता – rusty1042
पैरामीटर प्रिंट करने के लिए 'फ़िल्टर' जोड़ें, और 'console.log' का उपयोग करें। देखें कि यह समझ में आता है। यदि ऐसा होता है, तो यह देखने के लिए कि यह काम करता है, 'फ़िल्टर' से एक डमी डेटम लौटने का प्रयास करें। –