Select2: withCredentials not supported

[pbkracker]

As the documentation says, "Select2 uses jQuery's $.ajax function to execute the remote call by default.", I figured I could drop in:

    xhrFields: { withCredentials: true },

(from http://api.jquery.com/jquery.ajax/) and then my requests would be sent with cookies. This is not the case.

My code:

$("#s2_input").select2({
          placeholder: "",
          allowClear: true,
          blurOnChange: true,
          openOnEnter: false,
          multiple: true,
          ajax: {
            url: "http://example.com/api/1/blah",
            xhrFields: { withCredentials: true },
            dataType: 'json',
            data: function (term, page) {
              return {
                page: page,
                count: 25,
                q: term
              };
            },
            results: function (data, page) {
              var more = (page * 25) < data.total;
              return { results: data.items, more: more };
            }
          },
          formatResult: namesformat,
          formatSelection: namesformat,
          escapeMarkup: function(m) { return m; },
          initSelection : function (element, callback) {
            var data = [];
            $(element.val().split(",")).each(function () {
                data.push({id: this, text: this});
            });
            callback(data);
          }
        });

The generated request lacks any cookies:

GET /api/1/blah?page=1&count=25&q=&_=1402438779497 HTTP/1.1
Host: example.com
Connection: keep-alive
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://127.0.0.1:3030
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.0 (Dart) Safari/537.36
Referer: http://127.0.0.1:3030/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

Using select2-3.4.5 and jQuery v1.11.1.

[davidschlum]

@pbkracker I had a similar issue this evening where ajax parameters weren't getting passed as I expected. It turns out I missed the select2 > ajax > params setting when looking through the documentation. In my case, I was trying to set the Content-Type but it appears the same pattern should work for you. Please change the way you're passing xhrFields to match below and let me know if that accomplishes what you're looking for.

$("#s2_input").select2({
    placeholder: "",
    allowClear: true,
    blurOnChange: true,
    openOnEnter: false,
    multiple: true,
    ajax: {
        url: "http://example.com/api/1/blah",
        params: {
            xhrFields: { withCredentials: true }
        },
        dataType: 'json',
        data: function (term, page) {
            return {
                page: page,
                count: 25,
                q: term
            };
        },
        results: function (data, page) {
            var more = (page * 25) < data.total;
            return { results: data.items, more: more };
        }
    },
    formatResult: namesformat,
    formatSelection: namesformat,
    escapeMarkup: function (m) { return m; },
    initSelection: function (element, callback) {
        var data = [];
        $(element.val().split(",")).each(function () {
            data.push({ id: this, text: this });
        });
        callback(data);
    }
});

Please note the params description in the documentation

[pbkracker]

Excellent. That worked great. Big help!

[davidschlum]

You're welcome!