dtsb-inserted

An element from the init function has been inserted into the dom.
Please note - this property requires the SearchBuilder extension for DataTables.

Description

This event is triggered whenever one of the elements created in the -init function of a SearchBuilder.Condition object is inserted by SearchBuilder into the document. This is useful as for some jQuery elements such as Select2, the HTML element needs to be in the dom before initialisation so that the functionality is correct.

This event is triggered at the following points

• Whenever the condition select element is changed
• Whenever the data select element is changed
• Whenever the criteria is created
• Whenever a criteria is added to the group
• Whenever a criteria in removed from the group
• Whenever a criteria is indented or out-dented

Admittedly, this is a large number of places for this to occur, however it is necessary.

When the data or the condition select element has their value changed the value elements need to be reset. The easiest way to do this is to remove the value elements and initialise them to their default state again.

When adding or removing criteria in the same group it is possible that more buttons need to be added or removed from the criteria that remain, again the easiest way to do this is to remove and rebuild the entire criteria, applying the values that previously existed.

For indenting and out-denting the criteria are removed from one group and added to another, so their dom elements need to be removed from the original and added to the next.

The event is triggered on the original element(s) created in the init function to be used to retrieve the value from the user. This means that the best place to set listeners for this event is also in the init function by listening for dtsb-inserted.

Type

Example

{
	init: function (that, fn, preDefined = null) {
		let el = $('<select>');
		$(el).prepend('<option></option>');

		// ...

		$(el).on('dtsb-inserted', function () {
			if ($(el).hasClass('select2-hidden-accessible')) {
				$(el).select2('destroy');
			}

			$(el).select2({ placeholder: 'Value' });

			if (preDefined !== null) {
				$(el).val(preDefined[0]);
				$(el).trigger('input');
			}
		});

		// ...
	}
}