CODEWITHSUNDEEP
javascriptjqueryajaxjquery-select2
rubberchicken
rubberchicken

Reputation: 1322

jQuery select2 AJAX not working

I'm using the jQuery select2 plugin and trying to get the AJAX to work with my ext data which is obviously not working and I'm just wondering if someone can point out what I'm doing wrong or missing something?

NOTE This is only for select v3.5.2

my js:

$('#cliselect').select2({
    ajax: {
        dataType: "json",
        url: "clientprojectpopulate.php",
        results: function (data) {
            return {results: data};
        }
    }
});

html:

<select id="cliselect" name="cliselect" style="width: 100%;" /></select>

my JSON returns (which I believe is valid):

[{"id":"62","text":"Alberta Innovates Health Solutions"},{"id":"4","text":"Alterna Savins & Credit Union"},{"id":"63","text":"BC Patient Safety & Quality Council"}]

Upvotes: 12

Views: 27474

Answers (2)

Sajjad Ali Khan
Sajjad Ali Khan

Reputation: 1813

The Select2 control is updated to version 4.0. Now input elements are not working any longer and there should be select elements in place of them.

The results have also been changed to

processResults: function (data) {
    return {
      results: data
    };  
}

Inside the processResults function you can use them like this:

processResults: function (data) {
    var results = [];
    $.each(data, function (index, account) {
        results.push({
            id: account.AccountID,
            text: account.AccountName
        });
    });

    return {
        results: results
    };
}

Upvotes: 20

rubberchicken
rubberchicken

Reputation: 1322

Figured out its because i was using <select>

It has to be an <input> for the ajax data to load...

<input type="hidden" id="cliselect" name="cliselect" style="width: 100%;" />

Upvotes: 14

Related Questions