2015-05-21 11 views
9

पर एक गतिशील अजाक्स यूआरएल का उपयोग करें I सूची में तत्वों को गतिशील रूप से लोड करने के लिए अजाक्स के साथ चयन 2 प्लगइन (v 3.5.2) का उपयोग करें।Select2 कॉल

मुझे चयन 2 (जहां एक यूआरएल संपत्ति AJAX सहायक में सेट की गई है) के प्रारंभ में और AJAX कॉल के समय के बीच एक समस्या है, इस यूआरएल को बदलने की आवश्यकता हो सकती है।

$box.select2({ 
    containerCssClass: "form-control" 
    minimumInputLength: 0, 
    allowClear: true, 
    ajax: { 
     url: someUrl, 
     dataType: 'json', 
     quietMillis: 100, 
... 
} 

मैं समझ नहीं कैसे, कब, कहाँ ajax.url मान बदलने के लिए इससे पहले कि यह शुरूआत:

तो मैं कुछ इस तरह की है।

Select2 की मदद का कहना है:

Select2 डिफ़ॉल्ट रूप से दूरदराज के कॉल निष्पादित करने के लिए jQuery के $.ajax समारोह उपयोग करता है। एक वैकल्पिक transport फ़ंक्शन ajax सेटिंग्स में निर्दिष्ट किया जा सकता है, या AJAX सहायक का उपयोग करने के बजाय कस्टम query फ़ंक्शन प्रदान करके पूरी तरह से कस्टम कार्यान्वयन बनाया जा सकता है।

लेकिन मुझे यह कैसे करना है इस पर कोई उदाहरण नहीं मिल रहा है।

किसी भी मदद के लिए अग्रिम धन्यवाद। बहुत सराहना की।

उत्तर

16

मैं यह नहीं समझ सकता कि कैसे, कब, AJAX.url मान को लॉन्च करने से पहले कहां बदलना है।

ajax.url विकल्प को स्थिर स्ट्रिंग या चयन 2 3.5.x और 4.0.0 दोनों में से एक को वापस करने की विधि के रूप में निर्दिष्ट किया जा सकता है।

$("select").select2({ 
    ajax: { 
    url: function() { 
     return UrlHelper.RemoteAPI(); 
    } 
    } 
}); 

यह आधार URL बदलते जब URL रनटाइम पर निर्धारित किया जाता है या स्वचालित रूप से एक अलग तरीके में उत्पन्न होता है उदाहरण के लिए, के लिए उपयोगी है। यदि आपको क्वेरी पैरामीटर, जैसे खोज शब्द भेजने के लिए उपयोग किया गया है, तो आपको ajax.data विकल्प को ओवरराइड करने की आवश्यकता है। यहाँ

$("select").select2({ 
    ajax: { 
    data: function (args) { 
     // args is the search term in 3.5.x 

     // args is an object containing the query parameters in 4.0.0 
     // args.term is the search term in 4.0.0 
     return { 
     search: args.term || args; 
     }; 
    } 
    } 
}); 

डेटा डिफ़ॉल्ट रूप से क्वेरी पैरामीटर के रूप में जोड़ दिया जाएगा, और कुछ और करने के लिए करता है, तो विधि प्रकार GET (डिफ़ॉल्ट) से बदल गया है अनुरोध निकाय के रूप में भेजा जाएगा।

Select2 डिफ़ॉल्ट रूप से दूरदराज के कॉल निष्पादित करने के लिए jQuery के $ .ajax समारोह उपयोग करता है। AJAX सेटिंग्स में एक वैकल्पिक परिवहन फ़ंक्शन निर्दिष्ट किया जा सकता है, या AJAX सहायक का उपयोग करने के बजाय कस्टम क्वेरी फ़ंक्शन प्रदान करके पूरी तरह से कस्टम कार्यान्वयन बनाया जा सकता है।

लेकिन मुझे यह कैसे करना है इस पर कोई उदाहरण नहीं मिल रहा है।

Select2 ajax.transport विकल्प को बदलकर एक अलग AJAX परिवहन का उपयोग करने की अनुमति देता है।

3.5 में।2, यह $.ajax -संगणीय विधि होना चाहिए, इसलिए यह success और failure कॉलबैक वाले ऑब्जेक्ट को लेने में सक्षम होना चाहिए।

$("select").select2({ 
    ajax: { 
    transport: function (args) { 
     // args.success is a callback 
     // args.failure is a callback 

     // should return an object which has an `abort` method. 
     return $.ajax(args); 
    } 
    } 
}); 

4.0.0 में, यह एक तरीका है जिसके एक params वस्तु (समान एक ajax.data को पारित कर दिया), एक success कॉलबैक, और एक failure कॉलबैक लेता होना चाहिए।

$("select").select2({ 
    ajax: { 
    transport: function (params, success, failure) { 
     var $request = $.ajax(params); 

     $request.then(success); 
     $request.fail(failure); 

     return $request; 
    } 
    } 
}); 
+0

स्पष्टीकरण के लिए बहुत बहुत धन्यवाद! –

0

इसे संभालने के लिए बहुत ही सरल जावास्क्रिप्ट कोड, सूटस्क्रिप्ट (नेट्सुइट) में भी उपयोग किया जा सकता है।

// prepare your dynamic URL inside this method and return 
function getURL() { 
    return url + params; 
} 

// While binding the select2 with the dropdown set url to call a anonymous function which internally calls another function. 
jQuery("select.itemDropDown").select2({ 
    placeholder: "Select an item", 
    width: "200px", 
    minimumInputLength: 3, 
    ajax: { 
     url: function() { 
      return getURL() 
     }, 
     dataType: 'json' 
    } 
}); 
संबंधित मुद्दे