AXMIM AXMIM - 5 months ago 51
jQuery Question

select2 ajax : Uncaught TypeError: Cannot read property 'context' of undefined

Attempting to do an AJAX call with the Select2 jquery plugin. The query seems to be working, but the issue occurs when ".context===undefined" is called on the "data" object:

Uncaught TypeError: Cannot read property 'context' of undefined
(anonymous function) @ select2.js:1651
(anonymous function) @ select2.js:651
$.extend.success @ select2.js:451
fire @ jquery-2.1.4.js:3099
self.fireWith @ jquery-2.1.4.js:3211
done @ jquery-2.1.4.js:8264
(anonymous function) @ jquery-2.1.4.js:8605


Here is my HTML:

<span id="workOrdersLookup" class="select2-selection select2-selection--single" style="width: 300px; display: inline-block;" role="combobox" data-bind="optionsValue: 'WorkOrderId', optionsText: 'WorkOrderNumber', value: WorkOrderId"></span>


Here is the returned JSON:

[{"WorkOrderId":"b13c3737-c3ce-42d8-95a4-dbd2b6ad766d","WorkOrderNumber":"10033 - 357153","DueDateTime":"6/14/2015 5:21:25 PM","Status":1},{"WorkOrderId":"f9f4f449-53d3-4e93-9162-e970a71ca2b4","WorkOrderNumber":"10241 - 301872","DueDateTime":"6/12/2015 10:56:24 PM","Status":1},{"WorkOrderId":"86782205-15ae-43b8-88a9-2f80a261b350","WorkOrderNumber":"10522 - 728155","DueDateTime":"6/13/2015 11:51:24 AM","Status":1},{"WorkOrderId":"846f38f6-7a0b-4cb2-860f-f54cc6b81250","WorkOrderNumber":"10944 - 757155","DueDateTime":"6/14/2015 1:35:25 PM","Status":1},{"WorkOrderId":"5d22de8c-1995-429c-8431-55363ca318fa","WorkOrderNumber":"11202 - 381180","DueDateTime":"7/30/2015 11:28:02 AM","Status":0},{"WorkOrderId":"b7e0276d-e9c0-4421-93c1-097bbe1bbbe5","WorkOrderNumber":"11497 - 452908","DueDateTime":"6/13/2015 4:22:24 PM","Status":1},{"WorkOrderId":"f11cc30d-877b-48ef-8e8d-dc52ba85fa4a","WorkOrderNumber":"11662 - 554562","DueDateTime":"6/14/2015 12:59:25 PM","Status":1},{"WorkOrderId":"80426f02-3863-448c-99b4-40b88e523899","WorkOrderNumber":"11738 - 431931","DueDateTime":"6/13/2015 8:01:24 AM","Status":1},{"WorkOrderId":"eec0b73a-eaea-464e-b14b-875fda2ec9ed","WorkOrderNumber":"11812 - 751435","DueDateTime":"6/12/2015 9:34:24 PM","Status":1},{"WorkOrderId":"7a824079-8cd2-4212-898a-bcafb6dec397","WorkOrderNumber":"12184 - 456670","DueDateTime":"6/13/2015 1:31:24 AM","Status":1},{"WorkOrderId":"0047ff2f-9e4c-490c-aa8b-9219f3e5da9a","WorkOrderNumber":"12264 - 503344","DueDateTime":"6/13/2015 12:21:24 PM","Status":1},{"WorkOrderId":"28ff159e-5c14-420b-a45a-446e2fb1f981","WorkOrderNumber":"12739 - 515468","DueDateTime":"6/14/2015 1:47:24 AM","Status":1},{"WorkOrderId":"417cc031-9fc1-4cec-a2c4-8c8c0f09f8ef","WorkOrderNumber":"12927 - 517644","DueDateTime":"6/14/2015 8:56:25 PM","Status":1},{"WorkOrderId":"cadfc948-3193-444b-827e-cbf34183b966","WorkOrderNumber":"13349 - 337107","DueDateTime":"6/13/2015 3:02:24 AM","Status":1},{"WorkOrderId":"67c80344-f7a9-411a-a0af-a6f406edf1ae","WorkOrderNumber":"15300 - 667097","DueDateTime":"6/13/2015 4:23:24 AM","Status":1},{"WorkOrderId":"f6929a96-3b24-4a5a-85cb-bfa8a28a4b94","WorkOrderNumber":"15916 - 360186","DueDateTime":"6/14/2015 8:23:24 AM","Status":1},{"WorkOrderId":"4d719616-3c10-43df-a29c-26779c0b1784","WorkOrderNumber":"16111 - 791177","DueDateTime":"6/14/2015 4:41:24 AM","Status":1},{"WorkOrderId":"b53abb8a-0544-4365-9834-bef5f30df984","WorkOrderNumber":"16659 - 604433","DueDateTime":"6/13/2015 2:03:24 PM","Status":2},{"WorkOrderId":"dce8a308-26ff-406d-ae98-47e9f31a45a9","WorkOrderNumber":"16869 - 302808","DueDateTime":"6/13/2015 5:53:24 PM","Status":0},{"WorkOrderId":"24b91d00-0baf-4cc1-a140-db7e5f10813a","WorkOrderNumber":"17052 - 700308","DueDateTime":"6/14/2015 4:51:25 PM","Status":1},{"WorkOrderId":"f9c87a2b-8735-46a0-ada6-9430e7be5f92","WorkOrderNumber":"18095 - 770739","DueDateTime":"6/14/2015 9:59:24 AM","Status":1},{"WorkOrderId":"91cbc26d-4b24-4060-a55b-58ae62696341","WorkOrderNumber":"18189 - 585562","DueDateTime":"6/12/2015 11:29:24 PM","Status":1},{"WorkOrderId":"f552d68a-b754-4fa8-8672-b090358c1fdf","WorkOrderNumber":"18264 - 758315","DueDateTime":"6/14/2015 3:52:25 PM","Status":1},{"WorkOrderId":"2c76a091-2154-4d22-93b2-231daa44e76d","WorkOrderNumber":"18369 - 699494","DueDateTime":"6/14/2015 3:50:24 AM","Status":1},{"WorkOrderId":"2380188c-e461-4a64-9e27-20a5be36e216","WorkOrderNumber":"18405 - 661978","DueDateTime":"6/13/2015 7:45:24 PM","Status":1},{"WorkOrderId":"5d92e775-ea7c-4fe0-8082-25a0b4ef89d4","WorkOrderNumber":"18422 - 795057","DueDateTime":"6/14/2015 11:03:24 AM","Status":1},{"WorkOrderId":"1b9920b2-84a0-4068-8f0b-11c0a749c543","WorkOrderNumber":"18580 - 312167","DueDateTime":"6/12/2015 5:29:24 PM","Status":1},{"WorkOrderId":"71d6d9c7-ad28-4ca3-9548-e63d5fdaf8ff","WorkOrderNumber":"21767 - 361132","DueDateTime":"6/12/2015 2:56:24 PM","Status":2},{"WorkOrderId":"68a95665-08d5-49f2-bc53-9d89b6244900","WorkOrderNumber":"22027 - 771866","DueDateTime":"6/13/2015 12:57:24 AM","Status":1},{"WorkOrderId":"ede4b0f0-c6a8-4b98-a6db-1f63744b2f8a","WorkOrderNumber":"22443 - 431743","DueDateTime":"6/14/2015 12:33:24 AM","Status":1},{"WorkOrderId":"e0290313-f0f2-4002-af50-5d4acda3d58c","WorkOrderNumber":"22610 - 773200","DueDateTime":"6/13/2015 6:54:24 AM","Status":1},{"WorkOrderId":"05f37251-1999-4133-8ca4-db118d5f7297","WorkOrderNumber":"23106 - 781159","DueDateTime":"6/13/2015 9:25:24 PM","Status":1},{"WorkOrderId":"43c7198c-67f5-44e1-b584-4dc7c4449f89","WorkOrderNumber":"23836 - 577156","DueDateTime":"6/13/2015 9:59:24 AM","Status":0},{"WorkOrderId":"9c975a12-75ea-42e9-8826-567f834f14d0","WorkOrderNumber":"24201 - 750775","DueDateTime":"6/14/2015 6:45:25 PM","Status":1},{"WorkOrderId":"dac8af35-79d7-4a9d-9a96-74dff26c5667","WorkOrderNumber":"24250 - 322136","DueDateTime":"6/13/2015 11:03:24 AM","Status":1},{"WorkOrderId":"6aa5e71e-dc57-4317-bca7-e74662db9465","WorkOrderNumber":"25716 - 774762","DueDateTime":"6/14/2015 11:58:24 AM","Status":1},{"WorkOrderId":"077975dd-6971-4286-b645-6cd1537f853f","WorkOrderNumber":"25762 - 612741","DueDateTime":"6/13/2015 8:50:24 PM","Status":1},{"WorkOrderId":"b610e826-a67c-4cb6-98a3-3fdaf2f8860e","WorkOrderNumber":"26363 - 516382","DueDateTime":"6/13/2015 5:54:24 AM","Status":1},{"WorkOrderId":"29493c6e-69c6-4635-8226-58e2007d1efb","WorkOrderNumber":"26992 - 621999","DueDateTime":"6/13/2015 6:47:24 PM","Status":1},{"WorkOrderId":"1e5df10c-4c13-4e28-926b-5e98b836ff88","WorkOrderNumber":"27731 - 590950","DueDateTime":"6/13/2015 3:36:24 PM","Status":2},{"WorkOrderId":"7bf55f76-adae-4cfa-9c12-8415b9559fec","WorkOrderNumber":"28492 - 748391","DueDateTime":"6/14/2015 6:49:24 AM","Status":1},{"WorkOrderId":"0702f4a9-1fd7-4cca-baea-988af03f6b11","WorkOrderNumber":"29635 - 794911","DueDateTime":"6/12/2015 4:51:24 PM","Status":1}]


Here is the code which is failing in "select2.js":

/**
* @param initial whether or not this is the call to this method right after the dropdown has been opened
*/
// abstract
updateResults: function (initial) {
var search = this.search,
results = this.results,
opts = this.opts,
data,
self = this,
input,
term = search.val(),
lastTerm = $.data(this.container, "select2-last-term"),
// sequence number used to drop out-of-order responses
queryNumber;

[...]//omitted for brevity

// save context, if any
this.context = (data.context===undefined) ? null : data.context;
// create a default choice and prepend it to the list
if (this.opts.createSearchChoice && search.val() !== "") {
def = this.opts.createSearchChoice.call(self, search.val(), data.results);
if (def !== undefined && def !== null && self.id(def) !== undefined && self.id(def) !== null) {
if ($(data.results).filter(
function () {
return equal(self.id(this), self.id(def));
}).length === 0) {
data.results.unshift(def);
}
}
}

[...]//omitted for brevity
}


Here is the javascript that hook the ajax with the select2:

$("#workOrdersLookup").select2(
{
ajax:
{
data: function (params)
{
var query =
{
workOrderNumber: params
}
return query;
},
type: "GET",
contentType: "application/json",
dataType: "json",
nonBlocking: true,
url: server_api_base_url + "api/v1/Equipments/" + self.EquipmentId + "/WorkOrders/all",
results: function (data)
{
var results = [];
$.each(data, function (index, item)
{
results.push(
{
id: item.WorkOrderId,
text: item.WorkOrderNumber,
WorkOrderId: item.WorkOrderId,
WorkOrderNumber: item.WorkOrderNumber
});
});
return
{
results: results
};
}
},
multiple: false,
placeholder: 'Select workorder',
dropdownAutoWidth: true,
minimumInputLength: 1
});


What is wrong that cause this error?
Searched this error in google and nothing except a forum discussion is related to this.

Answer

Turned out I was using an up to date way of select2 on an older version of select2. In the old version, use "query:" instead of "ajax:".

    $("#workOrdersLookup").select2(
    {
        query: function (query) {
            var data = { results: [] };

            self.Api.GetAllWorkOrders(query.term).done(function (result) {
                $.each(result, function (index, item)
                {
                    data.results.push(
                    {
                        id: item.WorkOrderId,
                        text: item.WorkOrderNumber
                    });
                });

                query.callback(data);
            });
        },
        placeholder: 'Select workorder',
        dropdownAutoWidth: true,
        minimumInputLength: 4
    });