Select2 with ajax option works only once

How Do I...
#1

Hello,

I’ve followed the docs on how to integrate the ajax (remote source) option and somewhat succeeded.

Integration:

	$(".hierarchy").select2({
	 ajax: {
		url: 'getOrgUnitHistoryName.action',
		dataType: 'json',
		contentType: 'application/json; charset=utf-8',
		type: 'POST',
		async: true,
		data: function (params) {
		var query = {
			term: params.term,
			parentCode: '1'
		}

		// Query parameters will be ?search=[term]&type=public
		return JSON.stringify(query);
		}
	},
	minimumInputLength: 3
});

The server does return the format expected to select2.

Unfortunately, it works only once. When I perform searching first time it shows all values in the list and I can select it. When I want to re-select it again, it doesnt work. It still does show the list with right options, but I can’t select any other option second time. The background becomes grey…

There are no errors in console too… any help would be much appreciated. I spent already a lot of time on integration…

#2

Is it possible to put your code on Codepen.io, Fiddle.js, or a similar site so I can see how it behaves?

#3

That’s a part of a big platform, I can’t put it somewhere else. I believe this platform does have a lot of other libraries and css files integrated maybe this is the issue or no… I really dont know. I made a short video footage to show how it behaves:
https://khakimovd-gmail.tinytake.com/sf/MjY1NjAzOF83OTc2NTY0

Maybe this can help you somehow.

Thanks a lot for your help.

#4

Thanks for the video, although it doesn’t really help me diagnose the problem. In this case, I would try to investigate why all of the options seem to become disabled after the initial selection (I’m guessing that’s what is happening, so perhaps that’s the first thing to confirm). You should be able to use your browser’s Inspect Element tool (in the Developer Tools) to inspect the actual generated <option> elements in your <select>, as well as look at the Select2 widget components (probably <div>s, unless you’ve used a custom render template) that represent the <option>s. It’s possible that the <option> elements are being disabled (i.e., the disabled attribute is being added to the <option> elements in the DOM); it’s also possible that a CSS class is being set on the UI widget components that represent the <option> elements, and that class makes the UI components unselectable. You should be able to investigate all of these possibilities using the Developer Tools to inspect the DOM elements for the various components I mentioned above, looking at their attributes as well as the CSS rules that apply to them.

Once you figure out why the options can’t be selected, the next step is to figure out what’s causing that change of state. Since you’re using an AJAX data source, note that the objects that represent the items in the select list have a disabled property which, when set to true, cause the items to be disabled. So you might also want to inspect your data items and see if there’s a disabled property either coming from your data source or being set by something else afterwards. (One quick way to start looking for this stuff might be to simply do a text search in all of your JavaScript code for “disabled”.)

If none of that proves fruitful, then if possible perhaps you could disable some of the other libraries/frameworks you’re using on your site. Perhaps one of them does have some unexpected interaction with your Select2 widget.

Good luck, and please let me know if you resolve the issue.

1 Like
#5

Thanks a lot for your suggestions. I find out that when the first time I search, the attribute aria-selected is false for all searched items. But when I do select some of them and when I re-search again, all searched items’ attribute aria-selected became true. That’s why i can’t choose anymore.

Can this be a configuration error?

#6

Well, I’ve found what was the error. It was because I was returning all of my elements with the same id… Changing the id of elements solved the issue.

Thanks a lot for your help.

1 Like
#7

I’m glad you discovered the problem. I’m actually surprised that Select2 will accept such data without generating an error message (at least in the JavaScript console).

If you wouldn’t mind, please Like my replies that helped you resolve the issue. It will improve my “reputation score” on the site, giving other posters more confidence that my answers are helpful.