JQuery Select2 call
I am using select2 4.0.3
I have 3 choices .. let's name them 1, 2 and 3. Select 2 depends on the value selected when selecting 1. Select 3 depends on the value selected when selecting 2
All these selections are inside the wizard generated by the jquery steps plugin and
I am using parameters templateResult
and templateSelection
to format my ajax results
I wrote the following code:
$("#1").select2({
placeholder: '<spring:message code="wzricper.step3.TipoPermesso" />',
allowClear: false,
minimumResultsForSearch: -1,
ajax: {
url: '${prelevaRaggruppamentiPermesso}',
dataType: 'json',
delay: 250,
data: function (params) {
return {
page: params.page,
lang:'it'
};
},
processResults: function (data, page) {
if( data.payload != null && data.payload.length )
{
return {
results: data.payload.sort(compareByDescrizione)
};
}
else
{
return {
results: []
};
}
},
cache: false
},
escapeMarkup: function (markup) {
return markup;
},
templateResult: formatRepo,
templateSelection: formatRepoSelection
}).on("select2:select", function (e)
{
viewSelectNumb2("select2:select", e);
}).on("select2:unselect", function (e)
{
//Empty and disable select with id 2
});
function viewSelectNumb2(name, evt)
{
//With or without this instruction behaviour is always the same
//evt.stopImmediatePropagation();
$("#2").select2({
placeholder:"<spring:message code='wzricper.step3.Area' />",
allowClear: false,
minimumResultsForSearch: -1,
ajax: {
url: '${prelevaTipologiePermesso}',
dataType: 'json',
dropdownCssClass : 'bigdrop',
delay: 250,
data: function (params) {
return {
page: params.page,
idTipoRaggruppamento: raggruppamentoPerm.id,
'idCivico': infoIndirizzo.idCivico,
codiceVia: infoIndirizzo.idVia,
lang:'it'
};
},
processResults: function (data, page) {
if( data.payload != null && data.payload.length )
{
return {
results: data.payload.sort(compareByDescrizione)
};
}
else
{
return {
results: []
};
}
},
cache: false
},
escapeMarkup: function (markup) {
return markup;
},
templateResult: formatRepo,
templateSelection: formatRepoSelection
}).on("select2:select", function (e){
//Call function to valorize select #3
}).on("select2:unselect", function (e)
{
//Empty and disable select #3
});
}
function formatRepo (repo) {
console.log("FORMAT REPO: "+repo);
if (repo.loading)
{
console.log("FORMAT REPO LOADING: "+repo.loading);
return repo.text;
}
console.log("FORMAT REPO DESCRIZIONE: "+repo.descrizione);
var markup = repo.descrizione;
return markup;
}
function formatRepoSelection (repo) {
console.log("FORMAT REPO SELECTION: "+repo);
if( repo.text )
{
console.log("FORMAT REPO SELECTION TEXT: "+repo.text);
return repo.text;
}
console.log("FORMAT REPO SELECTION DESCRIZIONE: "+repo.descrizione);
return repo.descrizione;
}
function compareByDescrizione(a, b)
{
if( a.descrizione < b.descrizione )
{
return -1;
}
else if( a.descrizione > b.descrizione )
{
return 1;
}
else
{
return 0;
}
}
I faced this problem / issue: everything works well at the beginning
Then if I select a value in select # 1, then select a value in select # 2 and I go back to changing the value in select # 1 I see new values in select # 2, but when I select a value t see the selected value. as shown in the following picture
Basically, it seems that the "onselect" method doesn't fire at all .. and I can't figure out the reason Any advice would be really great
thank
Angelo
source to share
I understood. The problem is this: change and select2: select method is called when new objects appear from ajax calls
So, I changed my code by creating a new random id by doing:
.
.
processResults: function (data, page) {
if( data.payload != null && data.payload.length ) {
return {
results: $.map(data.payload.sort(compareByDescrizione), function(obj){
var aResult = obj;
aResult.idSri = obj.id;
aResult.id = createGuid();
return aResult;
})
};
} else {
return {
results: []
};
}
},
.
.
Where createGuid()
:
function S4() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
function createGuid() {
var guid = (S4() + S4() + "-" + S4() + "-4" + S4().substr(0,3) + "-" + S4() + "-" + S4() + S4() + S4()).toLowerCase();
console.log("guid "+guid);
return guid;
}
and now it works pretty well
Angelo
source to share