Is there a jQuery jEditable Multi-select plugin?

Question

I use a great jEditable plugin for some in-place editing on my page. There is one place, I need an element of multiple choice. Is there a jEditable plugin that allows me to do this?

I am trying to use the jEditable authoring API plugin to create my own multi selector plugin, but still no dice. There is simply not enough documentation about what each function does in the API. And every single plugin it provides seems to rely on other jQuery plugins. I just need a basic multiple choice element ...

Answer 1

I made a small patch to Kalyan’s proposal, which made it not work without the additional option “selected” and covertly encoded the size attribute. Then I modified it as a jEditable plugin, and not something you need to insert into jEditable. I currently use this on the client website, although I use it solely to populate the json string, so other methods may be wrong.

$.editable.addInputType("multiselect", {
    element: function (settings, original) {
        var select = $('<select multiple="multiple" />');

        if (settings.width != 'none') { select.width(settings.width); }
        if (settings.size) { select.attr('size', settings.size); }

        $(this).append(select);
        return (select);
    },
    content: function (data, settings, original) {
        /* If it is string assume it is json. */
        if (String == data.constructor) {
            eval('var json = ' + data);
        } else {
            /* Otherwise assume it is a hash already. */
            var json = data;
        }
        for (var key in json) {
            if (!json.hasOwnProperty(key)) {
                continue;
            }
            if ('selected' == key) {
                continue;
            }
            var option = $('<option />').val(key).append(json[key]);
            $('select', this).append(option);
        }

        if ($(this).val() == json['selected'] ||
                            $(this).html() == $.trim(original.revert)) {
            $(this).attr('selected', 'selected');
        }

        /* Loop option again to set selected. IE needed this... */
        $('select', this).children().each(function () {
            if (json.selected) {
                var option = $(this);
                $.each(json.selected, function (index, value) {
                    if (option.val() == value) {
                        option.attr('selected', 'selected');
                    }
                });
            } else {
                if (original.revert.indexOf($(this).html()) != -1)
                    $(this).attr('selected', 'selected');
            }
        });
    }
});

Answer 2

I was looking for the same thing too. Trying to achieve this, but nothing works.

By the way, I found this, but it doesn’t work either - http://pastebin.com/cbDndv5h

Answer 3

jeditable . :

$('.editable').editable('http://www.example.com/save.php', { 
 data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
 type   : 'select',
 submit : 'OK'
});