Passing Custom Headers to Ajax request on Select2

Question

We are trying to implement Ajax Remote data loading 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 };

            }
        }
    };

We are using AngularJS. With each Http request we have set it's default to have our Authtoken as header. But somehow it is not working in conjunction with Select2 Ajax request. In above code, commented code are my failed attempts.

Answer 1

Taken from select2's demo page:

Select2 will pass any options in the ajax object to jQuery's $.ajax function, or the transport function you specify.

Using JQuery 2+, I was able to successfully set OAuth 2.0 and Content-Type headers.

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

Answer 2

This is how I fixed sending auth token. Just add this as Select2 ajax param;

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

Answer 3

another option:

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

Answer 4

I solved my above problem by supplying custom transport method.. Then I was stuck with Drop-down item not getting selected on mouse hover & drop-down item not being selected after click. After debugging I found proeprty "id" is must to have in returned json object.

Below is my code:-

    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 5

You can do like this:

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