CODEWITHSUNDEEP
javascriptjquery-select2
user2200620
user2200620

Reputation: 41

Select2 initSelection PreLoaded Data doesn't show

I'm using select2 to loading remote data into a select, the input tag has a value attribute preloaded that points to a preselected option, when I load the page, it show the select with the Clear option (x) at the right but the data doesn't show.

This is my code:

    function FormatResult(Consig) {
    return Consig.NomCon;
}

function FormatSelection(Consig) {
    $('#strConNom').val(Consig.NomCon);
    return Consig.NomCon;
}

$("#strCon").select2({
placeholder: "Search",
minimumInputLength: 5,
allowClear: true,
ajax: {
    url: "LoadData.asp",
    dataType: 'jsonp',
    data: function (term, page) {
        return {
            q: term,
            CodCas: $('#strCas').val(),
        };
    },
    results: function (data, page) {
        return {results: data.ConsigNom};
    }
},
initSelection: function(element, callback) {
    var id=$(element).val();
    if (id!=="") {
        $.ajax("LoadData.asp", {
        dataType: 'jsonp',
            data: {
                CodCon: id,
                CodCas: $('#strCas').val(),
            },

        }).done(function(data) { 
        callback(data);
        });
    }
},
formatResult: FormatResult,
formatSelection: FormatSelection,
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});

How can I solved this?

Upvotes: 2

Views: 24132

Answers (5)

Gajendra Bang
Gajendra Bang

Reputation: 3583

After struggling a lot, the solution is the following

Note, data object should have same key as your repoFormatSelection var data = {id: 1, cardname: "Abolish"};

You will see "text" in all answers, but it should be same as your json variables

and one more important thing, make sure you put value="0" or some dummy value in your select2 hidden input

$("#myselect").select2({
    allowClear: true,
    placeholder: "Search for a card",
    minimumInputLength: 3,
    ajax: {
            url: "search.php",
            dataType: 'json',
            quietMillis: 250,
            data: function (term, page) {
              return {
                 q: term, // search term
            };
        },
        results: function (data, page) { 
            return {results: data.items};
        },
        cache: true
    },
    initSelection: function (element, callback) {              
        var data = {id: 1, cardname: "Abolish"};
        callback(data);
    },
    formatResult: repoFormatResult,  
    formatSelection: repoFormatSelection, 
    escapeMarkup: function (m) {
        return m;
    } // we do not want to escape markup since we are displaying html in results
});

    function repoFormatResult(card) {
        var markup = '<div class="row-fluid">';

        if (card.cardimage != '')
        {
           markup += '<div class="span2" style="float:left; margin-right:10px"><a class="qtooltip" href="#" rel="' + card.cardimage + '" ><img src="' + card.cardimage + '" width="50px" /></a></div>';
        }

        markup += '<strong>' + card.cardname + '</strong> <small>' + card.editionname + '</small>'
        markup += '<div style="clear:both;"></div></div>';

        return markup;
    }

    function repoFormatSelection(card) {
        return card.cardname;
    }

Upvotes: 0

sanjay.parekh13
sanjay.parekh13

Reputation: 21

When select2 is complete loading write following code

$(".ajax_select").select2("data", {"id": 5, "text": "Test"});

it will set default selection of select2.

Upvotes: 2

Bodkins
Bodkins

Reputation: 51

For me i had to remove the place holder option from the initial setup - might be useful for someone else

Upvotes: 1

Guillaume Pommier
Guillaume Pommier

Reputation: 477

Make sure that, in your initSelection function, your LoadData.asp passes a single object and NOT an array containing a single object.

Wrong:

[{"id": 5, "text":"myValue"}]

Correct:

{"id": 5, "text":"myValue"}

Here's your function modified.

initSelection: function(element, callback) {
    var id=$(element).val();
    if (id!=="") {
        $.ajax("LoadData.asp", {
        dataType: 'jsonp',
            data: {
                CodCon: id,
                CodCas: $('#strCas').val(),
            },

        }).done(function(data) { 
            callback(data[0]);
        });
    }
},

Upvotes: 8

Bill
Bill

Reputation: 71

I had a similar problem and I solved it by including a value attribute in the html of the input element and of course appropriate formatSelection and initSelection.

The json passed into the select2 has two fields id and text.

Here's my js code:

$( "#contributorNameSearchId" ).select2({
        placeholder: "Select a contributor",
        containerCssClass: "dropDown",
        minimumInputLength: 3,
        ajax: { 
            url: "getList?t=contributor",
            dataType: 'json',
            data: function (term, page) {
                return {
                    term: term, // search term
                    page_limit: 10,
                };
            },
            results: function (data, page) { 
                return {results: data};
            }
        },
        allowClear: true,
         formatSelection: function(data) { 
            return data.text; 
        },
        initSelection : function (element, callback) {
            var obj= {id:1,text:'whatever value'};
            callback(obj);
        } 
    });

and the input element itself:

<input value="0000" name="contributorNameSearch" id="contributorNameSearchId"/>

Notice the dummy value of the value attribute.

There's also a chance that your

callback(data);

needs a data.something instead (although your FormatSelection seems to be ok). Check the data that are returned from your LoadData.asp.

I hope that this helps.

Upvotes: 7

Related Questions