पर Select2

Question

हम Select2 में अजाक्स रिमोट डेटा लोड हो रहा है लागू करने के लिए कोशिश कर रहे हैं Ajax अनुरोध करने के लिए कस्टम हेडर पासिंग: -

$scope.configPartSelect2 = { 
     minimumInputLength: 3, 
     ajax: { 
      url: "/api/Part", 
      // beforeSend: function (xhr) { xhr.setRequestHeader('Authorization-Token', http.defaults.headers.common['Authorization-Token']); }, 
      // headers: {'Authorization-Token': http.defaults.headers.common['Authorization-Token']}, 
      data: function (term, page) { 
       return {isStockable: true}; 
      }, 
      results: function (data, page) { 
       // parse the results into the format expected by Select2. 
       // since we are using custom formatting functions we do not need to alter remote JSON data 
        return { results: data }; 

      } 
     } 
    }; 

हम AngularJS का उपयोग कर रहे हैं। प्रत्येक एचटीपी अनुरोध के साथ हमने अपने ऑथोकोकन को हेडर के रूप में डिफॉल्ट सेट कर दिया है। लेकिन किसी भी तरह यह चयन 2 अजाक्स अनुरोध के साथ संयोजन में काम नहीं कर रहा है। उपरोक्त कोड में, टिप्पणी कोड मेरे असफल प्रयास हैं।

Answer 1

Select2 के डेमो पृष्ठ से लिया:

Select2 jQuery के $ .ajax कार्य करने के लिए ajax वस्तु में किसी भी विकल्प हैं, या परिवहन समारोह आप पारित करेंगे उल्लिखित करना।

JQuery 2+ का उपयोग करके, मैं सफलतापूर्वक OAuth 2.0 और सामग्री-प्रकार शीर्षलेख सेट करने में सक्षम था।

ajax: { 
    headers: { 
     "Authorization" : "Bearer "+Cookies.get('accessToken'), 
     "Content-Type" : "application/json", 
    }, 
} 

Answer 2

मैंने कस्टम परिवहन विधि की आपूर्ति करके मेरी उपरोक्त समस्या हल की .. फिर मैं ड्रॉप-डाउन आइटम के साथ फंस गया था जो माउस होवर & ड्रॉप-डाउन आइटम पर क्लिक करने के बाद नहीं चुना गया था। डीबगिंग के बाद मैंने पाया कि "आईडी" प्रक्षेपित जेसन ऑब्जेक्ट में होना चाहिए।

नीचे मेरी कोड है: -

var fetchPart = function (queryParams) { 

     var result = http.get(queryParams.url, queryParams.data).success(queryParams.success); 

    result.abort = function() { 
     return null; 
    }; 
    return result; 
}; 

var partFormatResult = function (part) { 
    return "<div><h4>" + part.PartNumber + "</h4><p>"+ part.PartDescription + "</p></div>"; 
}; 

var partFormatSelection = function (part, container) { 
    console.log(part.Id + "number - " + part.PartNumber); 
    return part.PartNumber; 
// return part.PartNumber; 
    //return part.Id; 
}; 

$scope.configPartSelect2 = { 
    minimumInputLength: 3, 
    ajax: { 
     url: "/api/Part", 
     data: function (term, page) { 
      return { params: { isStockable: true, query: term, pageNo: page } }; 
     }, 
     transport: fetchPart, 
     results: function (data, page) { 
      console.log("result is called by select2"); 
      var more = (page * 10) <= data.length; // whether or not there are more results available 
      return { results: data, more: more }; 
     } 
    }, 
    formatResult: partFormatResult, 
    formatSelection: partFormatSelection, 
    dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller 
}; 

Answer 3

यह वह जगह है मैं कैसे प्रमाणीकरण टोकन भेजने तय की। बस इसे select2 AJAX param के रूप में जोड़ें;

transport: function(params){ 
    params.beforeSend = function(request){ 
     request.setRequestHeader("Authorization", 'OAuth ' + api_access_token); 
    }; 
    return $.ajax(params); 
}, 

Answer 4

एक और विकल्प:

ajax: { 
    url: '/api/Part', 
    params: { headers: { "Authorization": "XXX" } }, 
    ... 
} 

Answer 5

आप इस तरह कर सकते हैं:

transport: function (params, success, failure) { 

    params.beforeSend = function (request) { 
     request.setRequestHeader("Authorization-Token", http.defaults.headers.common['Authorization-Token']); 
    }; 
    var $request = $.ajax(params); 

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

    return $request; 
}