Jquery Select2 issue

Question

I'm using select2 4.0.3

I have 3 selects.. let's call them 1, 2 and 3. Select 2 depends on value selected on select 1. Select 3 depends on value selected on select 2

All these selects are inside a wizard created by jquery steps plugin and

I'm using the templateResult and templateSelection options in order 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'm facing this issue/problem: at the beginning all works good

Then if I select a value in select #1, then select a value in select #2 and I come back changing value in select #1 I see new values in select #2 but when I select a value, I don't see the selected value as showed in the following picture

Basically it seems the the "onselect" method is not at all fired.. and I can't understand the reason Any tip would be really great

Thank you

Angelo

Answer 1

I got it. The issue is the following: the change and select2:select method are called when there are new objects from ajax calls

So I changed my code by generating 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() is:

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 good

Angelo