I am trying to use the select2 ajax call with templates. I am getting the ajax in just fine but it is not using my template functions.
the ajax data is:
[
{"name":"First thing","otherData":"asdfg"},
{"name":"Second thing","otherData":"qqerr"},
{"name":"third thing","otherData":"yerty"},
{"name":"fourth thing","otherData":"hgjfgh"},
{"name":"fifth thing","otherData":"fhgkk"}
]
the select2 code (which i took a lot from here ) is:
FundSearch = {
create: function (selector, theURL) {
$(selector).select2({
ajax: {
url: theURL,
dataType: 'json',
delay: 250,
data: function (params) {
console.log(params.term);
return {
q: params.term, // search term
page: params.page
};
},
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 the remote JSON data
return {
results: data
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatData,
templateSelection: formatDataSelection
});
function formatData (data) {
if (data.loading) return data.name;
markup = "<h1>" + data.name + "</h1>" + "<p>" + data.otherData + "</p>";
return markup;
}
function formatDataSelection (data) {
return data.name;
}
}
};
The error I am getting is Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
on line 356 of select2.js
for Version: 3.5.2.
It seems to me that select2 is not using my templateSelection and templateResults function.
New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control: var data = { id: 1, text: 'Barn owl' }; var newOption = new Option(data. text, data.id, false, false); $('#mySelect2'). append(newOption).
Add Select All Option to jQuery Select2: First create the markup for the multi-value select box and a check box for selecting all option. Now add this java script to the page. The above script will be executed by onclick() event of the check box.
Select2 requires that the id property is used to uniquely identify the options that are displayed in the results list. If you use a property other than id (like pk ) to uniquely identify an option, you need to map your old property to id before passing it to Select2.
You are looking at the 4.0.0 documentation but are using 3.5.2. You can still access the 3.5.2 documentation.
Specifically, the templateSelection
and templateResult
options only exist in 4.0.0. They were called formatSelection
and formatResult
in 3.5.2.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With