Selectize: Setting Default Value in onInitialize with setValue

Question

I have a web application with multiple Selectize objects initialized on the page. I'm trying to have each instance load a default value based on the query string when the page loads, where ?<obj.name>=<KeywordID>. All URL parameters have already been serialized are are a dictionary call that.urlParams.

I know there are other ways to initializing Selectize with a default value I could try; but, I'm curious why calling setValue inside onInitialize isn't working for me because I'm getting any error messages when I run this code.

I'm bundling all this JavaScript with Browserify, but I don't think that's contributing to this problem.

In terms of debugging, I've tried logging this to the console inside onInititalize and found that setValue is up one level in the Function.prototype property, the options property is full of data from load, the key for those objects inside options corresponds to the KeywordID. But when I log getValue(val) to the console, I get an empty string. Is there a way to make this work or am I ignoring something about Selectize or JavaScript?

module.exports = function() {    
    var that = this;

    ...

    this.selectize = $(this).container.selectize({
        valueField: 'KeywordID',  // an integer value
        create: false,
        labelField: 'Name',
        searchField: 'Name',
        preload: true,
        allowEmptyOptions: true,
        closeAfterSelect: true,
        maxItems: 1,
        render: {
           option: function(item) {
                return that.template(item);
            },
        },
        onInitialize: function() {
            var val = parseInt(that.urlParams[that.name], 10);  // e.g. 5
            this.setValue(val);
        },
        load: function(query, callback) {
            $.ajax({
                url: that.url,
                type: 'GET',
                error: callback,
                success: callback
            })
        }
    });

};

...

Answer 1

After sprinkling in some console.logs into Selectize.js, I found that the ajax data hadn't been imported, when the initialize event was triggered. I ended up finding a solution using jQuery.when() to make setValue fire after the data had been loaded, but I still wish I could find a one-function-does-one-thing solution.

module.exports = function() {    
    var that = this;

    ...

    this.selectize = $(this).container.selectize({
        valueField: 'KeywordID',  // an integer value
        create: false,
        labelField: 'Name',
        searchField: 'Name',
        preload: true,
        allowEmptyOptions: true,
        closeAfterSelect: true,
        maxItems: 1,
        render: {
           option: function(item) {
                return that.template(item);
            },
        },
        load: function(query, callback) {
            var self = this;
            $.when( $.ajax({
                url: that.url,
                type: 'GET',
                error: callback,
                success: callback
            }) ).then(function() {
                var val = parseInt(that.urlParams[that.name], 10);  // e.g. 5
                self.setValue(val);
            });
        }
    });

};

...

Answer 2

You just need to add the option before setting it as the value, as this line in addItem will be checking for it: if (!self.options.hasOwnProperty(value)) return;

inside onInitialize you would do:

var val = that.urlParams[that.name]; //It might work with parseInt, I haven't used integers in selectize options though, only strings.
var opt = {id:val, text:val};
self.addOption(opt);
self.setValue(opt.id);