Select2 field plugin making unnecessary ajax calls

mguinness

I'm using the Select2 plugin for Editor, but I've noticed that when configured to use ajax it makes unneccesary calls like http://localhost/api/Lookup?initialValue=true&value="" to the endpoint during create.

I looked at the plugin code and I think there's a simple solution within the set function. Changing if ( needAjax ) { … } to if ( needAjax && val ) { … } stops the endpoint being called when the requested value is empty.

Hoping that this can be included in the next release.

allan

Agreed - thanks for the suggestion. Its committed in for the next release.

Allan

mguinness

Great, thanks! Would you be able to send me the latest version via email so I can test changes before release?

allan

Its just exactly as you suggest at the moment. I think there are one or two other outstanding changes that I need to make. On the plus side, the plug-ins aren't tied to the Editor release, so they can be updated at any time if required.

Allan

mguinness

FYI, when the multiple option is used with Select2 an empty selection comes through as [""] instead of [] so I had to tweak the test to accommodate that.

if ( needAjax && val && $(val).not([""]).length ) { … }

mguinness

This is fixed for a single values in the latest release, but It's still an issue for multiple values (as outlined in my Feb 27th post).

allan

when the multiple option is used with Select2 an empty selection comes through as [""]

That's odd. To my mind that means something is selected and it as an empty string value, which is perfectly valid. I would have expected Select2 to just return [] if there were nothing selected.

Allan

mguinness

Thanks for your reply Allan. It occurs with Standalone model. Say you have the following element:

<span id="state" data-editor-field="stateCode"></span>

And you have the following editor field defined:

label: "State:",
name: "stateCode",
type: "select2",
opts: {
    multiple: true,
    ajax: {
        url: '/api/StateNames',
        dataType: 'json'
    }
},
separator: ","

When you go into edit mode it will call /api/States?initialValue=true&value=[""] since JSON.stringify() is used to create the value parameter. I had suggested using $.param() to avoid double quotes but you had concerns for backwards compatibility.

allan

It could be that I just need to go with it and call it a v2 of the plug-in or something. I'll investigate some more. Thanks for the insights!

Allan

mguinness

To maintain backwards compatibility an option like
jsonParam: true|false (with default as true) could work.

mguinness

Any chance that $(val).not([""]).length can be included in the select2 plugin code as an interim measure? It would avoid a lot of unnecessary ajax calls on complex forms.

allan

That would be an option yes. I do like your jsonParam option, but you could stick that in as an interim solution in your locally hosted code.

Allan

mguinness

@allan Have you given any more thought to adding a jsonParam to the Select2 plugin? I think other people would find this helpful when using the multiple option. Do you see any downside to this change other than the work involved at your end?

mguinness

Suggested code change below to avoid any misunderstanding. For backwards compatibility the original JSON.stringify would be the default if option not specified.

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

mguinness

@allan, bumping this thread to see if there's any progress on allowing jQuery.param() in the select2 plugin. Currently when using the multiple option JSON.stringify produces the following URL:

http://localhost/api/Lookup?initialValue=true&value=["1","12"]

This is problematic when using Model Binding in ASP.NET Core, but it works when the following querystring is used (see ASP.NET GET parameters with square brackets).

http://localhost/api/Lookup?initialValue=true&value=1&value=12

Using the code snippet in my previous post would fix this issue for developers using JS+CSS editor with ASP.NET and the select2 plugin. Any chance this code could be incorporated into the plugin for general release?

allan

Sorry - no I've not managed to look into this yet. It is on my list of things to do though!

Allan

mguinness

No problem Allan, glad to hear that you'll take a look at it when you have time.

allan

Finally got around to this - sorry! I've added in:

                    var initData = conf.urlDataType === undefined || conf.urlDataType === 'json'
                        ? 'initialValue=true&value='+JSON.stringify(val)
                        : $.param({initialValue: true, value: val});

So urlDataType can be json or param now. This will be deployed to the site with the 1.9.1 update in the next week or two.

Allan

mguinness

Thanks Allan, this was much anticipated! For others that wish to use to use this new
urlDataType option with ASP.NET Core, you'll need the following action declaration:

public IActionResult Lookup(bool initialValue, [FromQuery(Name="value[]")]int[] value)

mguinness

Allan, do you know when this change will be downloadable from the Select2 webpage? Can this be deployed before the Editor 1.9.1 release or is that imminent?

allan

It will indeed be deployed with the 1.9.1 release. We are expecting to tag that up and release it next week now (currently working on some infrastructure for new releases).

Allan