select2 box with dynamic url

select2 box with dynamic url

advaniaadvania Posts: 35Questions: 13Answers: 0

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)

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • advaniaadvania Posts: 35Questions: 13Answers: 0

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

  • advaniaadvania Posts: 35Questions: 13Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • mguinnessmguinness Posts: 85Questions: 12Answers: 1

    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?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • mguinnessmguinness Posts: 85Questions: 12Answers: 1

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

  • mguinnessmguinness Posts: 85Questions: 12Answers: 1

    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.

  • mguinnessmguinness Posts: 85Questions: 12Answers: 1

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

This discussion has been closed.