Passing intestazioni personalizzate a richiesta Ajax su Select2

Question

Stiamo cercando di implementare Ajax caricamento dei dati remota in Select2: -

$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 }; 

      } 
     } 
    }; 

Stiamo utilizzando AngularJS. Con ogni richiesta HTTP abbiamo impostato come predefinito il nostro Authtoken come intestazione. Ma in qualche modo non funziona in combinazione con la richiesta Ajax Select2. Nel codice sopra, il codice commentato sono i miei tentativi falliti.

Answer 1

Tratto da pagina di configurazione di select2:

Select2 passerà tutte le opzioni nell'oggetto Ajax per la funzione di jQuery $ .ajax, o la funzione di trasporto voi specificare.

Utilizzando JQuery 2+, sono riuscito a impostare correttamente intestazioni OAuth 2.0 e Content-Type.

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

Answer 2

Ho risolto il problema di cui sopra fornendo un metodo di trasporto personalizzato. Quindi sono stato bloccato con l'elemento a discesa che non viene selezionato al passaggio del mouse al passaggio del mouse & non selezionato dopo il clic. Dopo il debug, ho trovato che proeprty "id" è necessario avere in oggetto json restituito.

Qui di seguito è il mio codice: -

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

Questo è come mi fissa l'invio di autenticazione token. Basta aggiungere questo come Select2 ajax param;

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

Answer 4

un'altra opzione:

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

Answer 5

Si può fare in questo modo:

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; 
}