change event not firing on ajax select2

[pom...@gmail.com]

Hello.
I've got three select2 on my page, two work very well, the third (the only that gets data from an ajax source) does not fire the change event.
the code is taken very closely from the repository search example.
The data is retrieved and shown correctly, but the change event is never fired. I feel like I've done a stupid error and that I can't see. Can anyone spot it?
thanks in advance,
m.


$("#cboClienti").select2({
placeholder: "search for a customer",
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "/api/clienti/",
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
id: term, // search term
};
},
results: function (data, page) {

return { results: data};
},
cache: true
} ,
formatResult: clientiFormatResult,
formatSelection: clientiFormatSelection,
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
})
.on("change",
function (e) {

$("#txtRSCliente").val(e.RagioneSociale);

});

});

function clientiFormatResult(cliente) {
var markup = '<div class="row-fluid">' +
'<div class="span2"> ' +
'<div class="span10">' +
'<div class="row-fluid">' +
'<div class="span6">nome: ' + cliente.NomeCompleto + '</div>' +
'<div class="span3">indirizzo: ' + cliente.IndirizzoCompleto + '</div>' +

'</div>';



markup += '</div></div>';

return markup;
}

function clientiFormatSelection(cliente) {
return cliente.NomeCompleto;
}

[ima...@gmail.com]

Try changing your return parameters under Ajax:

data: function(params) {
return {
q: params.term,
page: params.page
};
},

You've got a comma after "id: term" but no mention of page.

It could be something more, but this might be a start. Best wishes, and please keep us posted!

[pom...@gmail.com]

Thank you for your kind reply.
Too bad, your advice didn't work. As I've written before, the select *works* well, in that it makes the correct call to my web service page and shows correctly the results. The problem is that when I select one of the items, the change event is not fired.
If I tell chrome to break the execution on the change event, it stops! but the change event is never passed to select2.
This behaviour happens only with this control, the other two select controls (not ajax) work well.
tia,
M

[pom...@gmail.com]

I've noticed that the select does not work well, in fact. In the "loading remote data" example, the items could be selected by pressing the up and down arrows. In my page, the list is populated but pressing the up and down arrows does nothing.

[ima...@gmail.com]

At least with v3.5.2, it was noted to check out the full underlying example page source code, as there were many calls and gems omitted from the code snippets seen on the page.

I'm on my mobile now, so I'm afraid I won't be of much help, but I'll probably be working on a project later on this evening or weekend and may be in exactly the same boat (switching to remote data instead of static options).

I'm finding a few quarks, as can be expected in beta, but so far, it seems to be a lot more consistent and intuitive than previous versions.

Shout out to Igor and Kevin on the great work and support! Also, Igor seems to be really adamant about answering questions or feedback people have, wherever they post. If either happen to read over this, I greatly appreciate the continued development and improvements!

[pom...@gmail.com]

SOLVED!
the items in the returned JSON MUST have an "id" field, named "id". Mine had CustomerID and it di not work.
I've added "id" and now it works like a charm.
Probably if I couldn't change the WS I could have used the transformation inside the return function.
thanks everybody,
have fun.
m

[santiag...@gmail.com]

Hello, you could post your code? I have the same problem I do not see how to fix it. Thanks in advance!

[pom...@gmail.com]

Il giorno sabato 21 marzo 2015 19:13:40 UTC+1, San ha scritto:
> Hello, you could post your code? I have the same problem I do not see how to fix it. Thanks in advance!

Hi, You just have to make sure your JSON has an id field, named "id", that's all. You MAY want to use also a "text" field, but it is not mandatory. From the select2 docs:
Result.results [object] "Array of result objects. The default renderers expect objects with id and text keys. The id property is required, even if custom renderers are used. The object may also contain a children key if hierarchical data is displayed. The object may also contain a disabled boolean property indicating whether this result can be selected."