jQuery X-Editable लाइब्रेरी

Question

के साथ उपयोग किए जाने पर चयन 2 ड्रॉपडाउन चयन के आउटपुट को संशोधित करें मैं X-Editable http://vitalets.github.io/x-editable/ का उपयोग करने के लिए अब 2 सप्ताह के लिए चयनका उपयोग करने की कोशिश कर रहा हूं।

मूल रूप से मैं AJAX अनुरोध से डेटा लोड करने की कोशिश कर रहा था और फिर लाइब्रेरी का उपयोग कर रहा था, लेकिन मैं देख सकता था कि पुराने कोड जो दोनों पुस्तकालयों के पुराने संस्करणों के साथ काम करते हैं।

चीजों को थोड़ा सा सरल बनाने के लिए मैंने अब अपने डेटा को अलग से लोड करने का निर्णय लिया है ताकि X-Editable और Select2 को केवल पहले से उपलब्ध डेटा की एक सरणी से निपटना पड़े।

मेरी समस्या अब डेटा के प्रदर्शन को संशोधित कर रही है।

डिफ़ॉल्ट रूप से मैं संपादन फ़ील्ड के रूप में खुश हूं जो "टैग" चुनने जैसा दिखता है।

संपादन पूर्ण होने पर और प्रारंभिक पृष्ठ लोड पर, यह मेरे चयनित आइटम को अल्पविराम से अलग स्ट्रिंग के रूप में दिखाता है। मैं अलग दिखने के लिए उस भाग को संशोधित करना चाहता हूं।

मैंने कुछ उदाहरण देखा जो काम करते थे क्योंकि मैं इसे नए संस्करणों के साथ काम नहीं कर रहा हूं।

यह JSFiddle यहां http://jsfiddle.net/jasondavis/j72k110m/ मेरी वांछित आउटपुट और कार्यक्षमता दिखाता है ... लगभग लेकिन पकड़ यह है कि यह डेमो Select2 लाइब्रेरी के पुराने संस्करणों का उपयोग कर रहा है। यह Select2 संस्करण v3.4.4 और एक्स-संपादन योग्य संस्करण v1.5.1 है

Select2 का नवीनतम संस्करण है संस्करण v4.0.0 एक्स-संपादन योग्य है v1.5.1 पर नवीनतम बनाए रखने में इसे थोड़ी देर में अपडेट नहीं किया गया है।

---

जब करने के लिए क्लिक किया:

---

प्रारंभिक लोड पर और नए मूल्य चयन करने के बाद यह इस तरह दिखना चाहिए जिसके नीचे यह एक span में हमारे चयनित मान लपेटता का मतलब चयनित मानों को संपादित करें, यह ऐसा दिखना चाहिए जो "टैग" जैसा दिखता है, हालांकि इसे <span> भाग नहीं दिखाना चाहिए!

---

इस JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/
मैं नए संस्करण के लिए Select2 अद्यतन किया है और मैं "टैग" के रूप में चयनित मान दिखाने से ऊपर अन्य JSFiddle से कार्यक्षमता को दोहराने के लिए कोशिश कर रहा हूँ में।

इस संस्करण के साथ एक और मुद्दा यह है कि जब मानों को चुन, यह लटकती सूची से एक विकल्प को दूर नहीं करता है। तो भले ही 1 आइटम पहले से ही चुना गया है, फिर भी यह फिर से क्लिक करने के विकल्प के रूप में दिखाई देता है!

दूसरा मुद्दा यह है कि नए चयनित आइटम गैर-संपादन स्क्रीन पर जोड़े नहीं जाते हैं।नीचे

अधिक छवियों को दिखाने के लिए मैं क्या मतलब है ...

छवि नीचे आरंभिक स्क्रीन लोड चयनित आइटम और भी आइटम है कि चयनित और संपादित-मोड में नहीं कर रहे हैं पता चलता है। मुद्दा यह है कि यह चयनित नई वस्तुओं के साथ अद्यतन नहीं कर रहा है। इसके अलावा यह शीर्षक/नाम

के बजाय चयनित आईडी को दिखाता है मेरा अंतिम लक्ष्य एक असाइन किए गए उपयोगकर्ता के चयन की अनुमति देने के लिए बस मेरे एक्स-संपादन योग्य फ़ील्ड पर Select2 का उपयोग करना है। चयनित असाइन किए गए उपयोगकर्ता एक गुरुत्वाकर्षण थंबनेल छवि और उपयोगकर्ता नाम दिखाएंगे।

दोनों चयन 2 और एक्स-संपादन योग्य टेम्पलेट शैली आउटपुट के उपयोग को आउटपुट को संशोधित करने के लिए अनुमति देते हैं, हालांकि जब वे एक साथ काम कर रहे होते हैं, तो डिफ़ॉल्ट कार्यक्षमता अलग होती है और आउटपुट संशोधन फ़ंक्शन समान काम नहीं करते हैं जब वे या तो चलते हैं उस पर पुस्तकालय; स्वयं का।

मुझे पता है कि 2 पुस्तकालयों के साथ मिलकर काम करने के लिए मुझे क्या करना है, यह एक्स-एडटेबल के पुराने संस्करण के साथ काम करने के लिए सिलेक्ट 2 के नए संस्करणों को प्राप्त करने की बात है, जिसे एक में अपडेट नहीं किया गया है दुख की बात है!

Answer 1

अंतिम jsfiddles है कि मैं पर परीक्षण किया गया था https://jsfiddle.net/N6bQE/329/ (बूटस्ट्रैप संपादन योग्य) और https://jsfiddle.net/N6bQE/331/ (poshytip संपादन योग्य) पर हैं।

एक्स-एडटेबल के साथ चयन 2 4.0.0 काम करने की कोशिश करते समय मैंने कुछ अवलोकन किए हैं। (रिक्त स्थानों ध्यान दें)

1. आप data-valueapples, oranges, pie के लिए सेटिंग कर रहे थे, जो तकनीकी रूप से सही नहीं है। आईडी को बिल्कुल मेल खाना चाहिए, लेकिन के कारण एक दुर्भाग्यपूर्ण गलतीएक विशेषता चयन 2 के पुराने संस्करणों में, अतिरिक्त व्हाइटस्पेस को पूरी तरह अनदेखा कर दिया गया था।

   रिक्त स्थान को हटाने से मुख्य समस्या हल हो जाती है, जो चयन 2 सही तरीके से मिलान नहीं कर रहा था (और नतीजतन उन्हें प्रदर्शित नहीं कर रहा था)।

2. आपका sourceकोई भी मान आप data-value के माध्यम से गुजर रहा थे, शामिल नहीं किया तो Select2 उन्हें प्रदर्शित करने का कोई रास्ता नहीं था। id विशेषताओं में से कुछ को अस्तर करके, चयन 2 पॉपअप प्रदर्शित होने पर चयनित मान प्रदर्शित करने के करीब एक कदम था।

3. आप tags और source दोनों का उपयोग कर रहे थे, जो X-Editable अनुमति नहीं देता है। प्लगइन tags को source से अधिक प्राथमिकता देने के लिए दिखाई दिया, इसलिए वास्तव में चयन 2 में कुछ भी नहीं पारित किया गया था और आपके source को पूरी तरह अनदेखा कर दिया गया था।

4. लेकिन इससे कोई फर्क नहीं पड़ता, क्योंकि X-Editable पहले स्थान पर सही ढंग से मूल्य प्रदर्शित नहीं कर रहा है। आप देखेंगे कि data-value को एक टैग के रूप में प्रदर्शित किया जा रहा है, विभाजन के बजाय और एकाधिक टैग के रूप में प्रदर्शित किया जा रहा है। X-Editable को इसके साथ सहयोग करने के लिए, आपको अपने चयन 2 विकल्पों में separator: ',' सेट करने की आवश्यकता है।हालांकि यह विकल्प अब चयन 2 के लिए समर्थित नहीं है, एक्स-एडटेबल इस के पक्ष में viewseparator विकल्प को पूरी तरह से अनदेखा करता है।

5. क्रम टैग अपडेट करने के बाद वे संपादित कर रहे हैं पाने के लिए, आप अगर display विधि में value एक सरणी है या नहीं की जाँच करने की जरूरत है। ऐसा इसलिए है क्योंकि X-Editable बस उस स्ट्रिंग को display विधि पर वापस ले जाता है, जिसकी अपेक्षा की जाती है।