select2 box with dynamic url

advania

I'm getting a weird 404 error when populating select2 ajax url with function, outside of this error the function seems to work fine and select2 box is getting populated based on updated urls when the _mvp.commodity_category variable is updated.

Editor field init:

        {
            label: "Commodity:",
            name: "connections.commodity_name",
            type: "select2",
            "opts": {
                delay: 250,
                inputclass: 'input-large',
                placeholder: "Select a commodity.",
                dropdownAutoWidth: true,
                dropdownCssClass: "bigdrop",
                ajax: {
                    url: function () {
                        if(_mvp.commodity_category!=null)
                        {
                            return "rest/views/commodity_ids/?category=" + _mvp.commodity_category;
                        }
                        return "";
                    },
                    dataType: "json",
                    data: select2_ajax_data,
                    processResults: connections_commodity_processResults,
                    cache: true
                },
                templateSelection: connections_commodity_templateSelection,
                escapeMarkup: function (m) { return m; }
            }
        },

But when i open editor modal I get this weird 404 that returns the entire function as string.

http://devhost/dev/function%20()%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(_mvp.commodity_category!=null)%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%22rest/views/commodity_ids/?category=%22%20+%20_mvp.commodity_category;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%22%22;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}

404 (Not Found)

allan

Does Select2 accept a function for the URL? In its documentation it says it takes an object. My guess is that it is going a toString() on your function as it isn't expecting a function.

Allan

advania

Well both data and processResults are pointed to functions, not sure why url should be different?

advania

named or un-named function both end up same way in that weird 404 message, but the url function actually works after the initial error. when i pass changes to the variable handled inside that function it changes the ajax url of the select2 box

allan

not sure why url should be different?

Not sure - that is something you would need to take up with the Select2 folks. Personally I like the ajax option as a function - DataTables provides that in its ajax option as it allows a more functional style of programming.

Allan

mguinness

Resurrecting this question as I've encountered the same issue. After looking into it I believe the issue is in editor.select2.js and not select2.js library.

beforeSend: function ( jqXhr, settings ) {
    // Add an initial data request to the server, but don't
    // override `data` since the dev might be using that
    var initData = 'initialValue=true&value='+
        JSON.stringify(val);

    if ( settings.type === 'GET' ) {
        settings.url += settings.url.indexOf('?') === -1 ?
            '?'+initData :
            '&'+initData;
    }
    else {
        settings.data = settings.data ?
            settings.data +'&'+ initData :
            initData;
    }
}

The problem is that settings.url gets cast to a string as a result of the object merge. If the following code is inserted before settings.url is used, it works as expected.

if (typeof(conf.opts.ajax.url) === 'function')
    settings.url = conf.opts.ajax.url();

I'm sure there's a more elegant way to fix this, but it works for me. Is it possible a fix can be made to editor.select2.js for the next release?

allan

100% agree - thank you. I had forgotten (which I shouldn't have - its above!) that the url can be given as a function. It will be in the next release.

Regards,
Allan

mguinness

Thanks Allan - can you provide a rough idea of when the changes will be available to download from the Select2 plug-ins page?

mguinness

I've hit another issue when using ajax and multiple: true with the select2 plugin. The code in beforeSend passes the array value as a delimited string.

// Add an initial data request to the server, but don't
// override `data` since the dev might be using that
var initData = 'initialValue=true&value='+
    JSON.stringify(val);

That produces a url like http://localhost/api/Lookup?initialValue=true&value=["1","12"] which isn't ideal.

A better way would be to use the jQuery.param() function instead.

// Add an initial data request to the server, but don't
// override `data` since the dev might be using that
var initData = $.param({ initialValue: true, value: val }, true);

That produces a url like http://localhost/api/Lookup?initialValue=true&value=1&value=12 which is easier to work with.

mguinness

The ajax url setting now accepts a function in the latest release.