CODEWITHSUNDEEP
javascriptjqueryrest
user2900150
user2900150

Reputation: 441

Unable to select values from the select list

my select list is getting populated via a service call but I cannot select any of the values from the select list.

AJS.$("#select2-actor").auiSelect2(
{
    placeholderOption: 'first',

    formatResult: function(actor) {
        return '<b>' + actor.text ;
    },
    data: function ()
    {
        var data = [];
        AJS.$.ajax({
            dataType: 'json',
            type: 'GET',
            url: AJS.params.baseURL+"/rest/leangearsrestresource/1.0/message/list/{actor}",
            async: false
            /*multiple: true*/
        }).done(function(result) {
            result = JSON.parse(result.value);
            for (var actor in result.actors) {
                data.push({
                    text : result.actors[actor]
                });
                //AJS.log(data)
            }
        });

        return {
            results: data
        };

    }
}

);

<div class="field-group">
    <label class="label">Actor Select</label>
    <input id="select2-actor" type="hidden" name="actor" style="width: 415px;" placeholder="Add an actor"/>

</div>

I am unable to figure out where I am going wrong. Here is the JSFiddleLink

Upvotes: 0

Views: 349

Answers (1)

Ivan Jovović
Ivan Jovović

Reputation: 5298

Here is the working fiddle: https://jsfiddle.net/64djszjf/14/

If you take a look at the source js file: https://aui-cdn.atlassian.com/aui-adg/5.8.13/js/aui-experimental.js, there are few lines that sets unselectable class:

populateResults: function(container, results, query) {
var populate, id=this.opts.id;

populate=function(results, container, depth) {

    var i, l, result, selectable, disabled, compound, node, label, innerContainer, formatted;

    results = opts.sortResults(results, container, query);

    for (i = 0, l = results.length; i < l; i = i + 1) {

        result=results[i];

        disabled = (result.disabled === true);
        selectable = (!disabled) && (id(result) !== undefined);

        compound=result.children && result.children.length > 0;

        node=$("<li></li>");
        node.addClass("select2-results-dept-"+depth);
        node.addClass("select2-result");
        node.addClass(selectable ? "select2-result-selectable" : "select2-result-unselectable");

which indicates that this js file requires id attribute of the object passed in.

My fix was to simply add id field to your javascript:

    for (var actor in result.actors) {

    data.push({
        text : result.actors[actor],
        id: "1"

    });
    AJS.log(data)
}

This also indicates that you might want to change your REST service to return ids, along with the names of Actors.

Upvotes: 1

Related Questions