Multi select dropdown in plugin settings?

[pichalite]

I am working on a plugin and trying to add a multi select dropdown to the settings page in the ACP. I can select multiple values, hit save and the values are getting saved in the database and I can retrieve them back from the db. If I go to the settings page again after saving, the dropdown UI doesn't reflect the options selected based on the values in the db. Any help?

[julian]

How are you handling the saving code? We recommend using v2 of the admin settings module:

<script>
	require(['settings'], function(Settings) {
		Settings.load('quickstart', $('.quickstart-settings'));

		$('#save').on('click', function() {
			Settings.save('quickstart', $('.quickstart-settings'), function() {
				app.alert({
					type: 'success',
					alert_id: 'quickstart-saved',
					title: 'Settings Saved',
					message: 'Please reload your NodeBB to apply these settings',
					clickfn: function() {
						socket.emit('admin.reload');
					}
				})
			});
		});
	});
</script>

The code there should handle selects properly.

[pichalite]

@julian I am using the same exact code. Regular select works fine. The problem is with selects with multiple option.

If I make the select multiple and just pick one option, then I can see the option selected when I come back to the settings page later. If I pick 2 or more and then come back to the page, there is no indication on the UI of which options were selected.

[pichalite]

Any help? This is the only thing stopping me from finishing the plugin.

@julian @baris @psychobunny

[psychobunny]

I reported here please keep in touch for updates

[julian]

can we get the HTML for that?

[pichalite]

Thanks @psychobunny

@julian

<div class="form-group col-xs-12">
					    <label for="categories">Category</label>
					    <select multiple class="form-control" name="categories" title="Categories">
                           <option value="">Select a category</option>
                           <option value="1">Announcements</option>
                           <option value="2">General Discussion</option>
                           <option value="4">Comments &amp; Feedback</option>
                           <option value="3">Blogs</option>
                        </select>
</div>

[yariplus]

This plugin works for me:

Settings.registerPlugin({
    Settings: {},
	types: ['selectMultiple'],
    use: function () {
        Settings = this;
    },
    set: function (element, value) {
        if (value.constructor === Array) {
            for (var val in value) {
                element.find('option[value=val]').attr("selected",true);
            }
        }
    },
    get: function (element, trim, empty) {
        var value = [];
        element.find('option:selected').each(function () {
            value.push($(this).val());
        });
        return value;
    }
});

With data-type="selectMultiple" added to the select tag.

[julian]

@pichalite Fixed. Give latest NodeBB code a try.

[julian]

Oh, @pichalite, something to consider -- the values as saved are now JSON in the database, not comma separated (that was just the default behaviour of .toString()).

So the multiselect should save data as ['foo', 'bar', 'baz']

[pichalite]

@julian Pulled the latest code. Doesn't seem to work for me. The data is still getting saved as comma separated and I don't see the options selected after page refresh.

[julian]

You may need to clear cache?

https://github.com/NodeBB/NodeBB/commit/d096a639d6d51c02b71c243dc8b1b29f94a73007

[pichalite]

@julian Tried clearing the cache, no luck. Setup a new installation of NodeBB using master, doesn't work. Am I missing something?

[julian]

What git hash are you on? git rev-parse HEAD

[pichalite]

@julian

git rev-parse HEAD
d096a639d6d51c02b71c243dc8b1b29f94a73007

[julian]

@pichalite I see where I went wrong, you don't have an id, but name is the correct property to check. One moment.

[julian]

@pichalite Okay, pull and try again.

[pichalite]

@julian Perfect, works now. Thank you.

[julian]

@pichalite Thanks for helping make NodeBB better!