2015-12-21 6 views
5

मैंने पहले से ही this, this, this और दस्तावेज the most important here के अनुसार पढ़ा है, लेकिन उनमें से कोई भी मेरे लिए काम नहीं करता है। मैं AJAX चयन 2 का उपयोग करने की कोशिश कर रहा हूं। मैं एक सामान्य "चयन" आइटम बनाने की कोशिश कर रहा हूं।चयन 2 4.0 AJAX प्री-फिल कैसे करें?

तो data-select2-json विशेषता वाले सभी तत्वों के लिए, मैं data-select2-json मान में AJAX URL के साथ select2 लागू करता हूं।

$('[data-select2-json!=""][data-select2-json]').each(function() { 
    var url = $(this).attr('data-select2-json'); 
    var pg_size = $(this).attr('data-select2-page-size') | 30; 
    $(this).select2({ 
     language: language_code, 
     tokenSeparators: [',', ' '], 
     ajax: { 
      url: url, 
      dataType: 'json', 
      delay: 300, 
      data: function (params) { 
       return { 
        q: params.term, // -> q=[search term] 
        page: params.page // -> page=[no page] 
       }; 
      }, 
      processResults: function (data, params) { 
       params.page = params.page || 1; 
       console.log(data.items); 
       return { 
        results: data.items, 
        pagination: { 
         more: (params.page * pg_size) < data.total 
        } 
       }; 
      }, 
      cache: true 
     }, 
     // let our custom formatter work 
     escapeMarkup: function (markup) { return markup; }, 
     minimumInputLength: 1, 
     templateResult: formatRepo, 
     templateSelection: formatRepoSelection 
    }); 
}); 

यह अच्छी तरह से काम करता है!

works well

JSON सर्वर को भेजता है हमेशा इस प्रकार फ़ॉर्मेट है:

{"items": 
    [{"item": "Fran\u00e7ais", "id": 1}, 
    {"item": "Finlandais", "id": 5}, 
    {"item": "Chinois simplifi\u00e9", "id": 15} 
    ], 
"total": 3} 

यह बहुत AJAX नमूना आप can find in the documentation के काफी करीब है। मेरी समस्या AJAX initiatilize है:

<select multiple="multiple" class="form-control" 
     data-select2-json="/fr/chez-moi/tags/langues" 
     multiple="multiple" 
     name="known_languages"> 
    <option value="1" selected="selected">Français</option> 
    <option value="2" selected="selected">Chinois simplifié</option> 
</select> 

और फिर Select2 साथ प्रारंभ (= कोड ऊपर $(this).select2({..), लेकिन यह does not काम है और मुझे खाली मान देता है::

मैं या तो HTML में मान जोड़ना चाहते हैं blank value

एनबी: the solution here given by Kevin Brown या तो काम नहीं करता है और मुझे बिल्कुल वही परिणाम देता है।

अन्य समाधान "&init=1" (या ऐसा ही कुछ) तो सर्वर प्रत्येक मान के लिए checked: true की तरह जोड़ा मानकों के साथ परिणाम भेज देंगे की तरह एक पैरामीटर के साथ यूआरएल के लिए AJAX में पूछने के लिए है, और मैं उन के साथ select2 कॉल करेंगे मान।

select2 को पूर्व-भरने के तरीके पर दस्तावेज़ में कुछ भी स्पष्ट नहीं है। मुझे कैसे करना चाहिए?

यहाँ मेरी अन्य कार्य हैं:

function item_or_text(obj) { 
    if (typeof(obj.item)!='undefined') { 
     return (obj.item.length ? obj.item : obj.text); 
    } 
    return obj.text; 
} 

function formatRepo(data) { 
    if (data.loading) return data.text; 
    var markup = item_or_text(data); 
    console.log('formatRepo', data, markup); 
    return markup; 
} 

function formatRepoSelection(item) { 
    var retour = item_or_text(item); 
    console.log('formatRepoSelection', item, item.item, retour); 
    return retour; 
} 
+0

क्या मेरा उत्तर आपके लिए काम नहीं करता है? कृपया प्रतिक्रिया दें। –

उत्तर

3

मैं Select2 Examples पृष्ठ पर दिए गए उदाहरण कोड का उपयोग कर एक working example on jsfiddle बनाया।

<select multiple="multiple" ... 

मैं भी एक दूसरे डिफ़ॉल्ट चयनित विकल्प कहा:: मैं बस उनके उदाहरण का चयन टैग बदलने के लिए आपके जैसे कई को स्वीकार करने के लिए किया था

<option value="3620194" selected="selected">select2/select2</option> 
<option value="317757" selected="selected">Modernizr/Modernizr</option> 

आप बेला पर एक नजर है, तो आप देखेंगे यह काम कर रहा है कि आप कैसे काम करना चाहते हैं।

आपने अपने templateSelection: formatRepoSelection विधि के लिए कोड शामिल नहीं किया है। मेरा अनुमान है कि विधि आपकी समस्या का कारण है।उदाहरण पृष्ठ पर इस्तेमाल कोड है:

function formatRepoSelection(repo) { 
    return repo.full_name || repo.text; 
} 

हालांकि मैं पता नहीं क्या आपके formatRepoSelection कोड है, मुझे लगता है कि अगर आप इसे निम्नलिखित की तरह कुछ करने के लिए बदलने के लिए, आपकी समस्या हल हो किया जाएगा:

function formatRepoSelection(repo) { 
    return repo.item; 
} 
+0

मैं आपको वैध के रूप में उत्तर देता हूं क्योंकि आपका उत्तर निश्चित रूप से काम करता है। मैं 4 घंटे बाद जाग गया, मेरे कोड की कोशिश की और सब कुछ काम कर रहा था: मैं वास्तव में नहीं जानता क्यों। एक चीज़ छू नहीं! मैं addind विकल्प + विकल्प विकल्प जैसे आप सुझाव देते हैं। शायद 10 दिनों के लिए दिन में 14 घंटे काम करना थोड़ा सा है ... आपके उत्तर के लिए बहुत बहुत धन्यवाद। –

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