Przechodząc niestandardowe nagłówki żądania Ajax na Wybór2

Question

Staramy się realizować Ajax zdalne ładowanie danych w 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 }; 

      } 
     } 
    }; 

Używamy angularjs. Przy każdym żądaniu Http ustawiliśmy domyślny nagłówek Authtoken jako. Ale jakoś nie działa w połączeniu z żądaniem Ajax Select2. W powyższym kodzie komentarzem są moje nieudane próby.

Answer 1

Zrobione ze strony demo select2 za:

Wybór2 minie żadnych opcji w obiekcie ajax do $ .ajax funkcji jQuery, albo funkcję przeniesie Cię sprecyzować.

Używając JQuery 2+, udało mi się pomyślnie ustawić nagłówki OAuth 2.0 i Content-Type.

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

Answer 2

mi rozwiązać mój powyższy problem poprzez dostarczanie metody niestandardowe transportowego .. Potem utknąłem z poz rozwijane coraz wybrany na najechaniu myszki & rozwijanej nie jest wybrana pozycja po kliknięciu. Po debugowaniu znalazłem proeprty "id" musi mieć w zwróconym obiekcie JSON.

Poniżej jest mój kodu: -

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

ten sposób naprawiłem wysyłania auth token. Po prostu dodaj to jako parametr ajax2 Select2;

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

Answer 4

inna opcja:

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

Answer 5

Można zrobić tak:

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