How to make Select2 work with jQuery Form Repeater?

Full Article :

KernalDev - https://www.kerneldev.com/2017/12/07/how-to-make-select2-work-with-jquery-form-repeater/

What are jQuery form repeater and Select2?

If you have ever had to create a HTML form with variable number of inputs then I am sure you came across a plugin called jQuery form repeater. This plugin is a really handy tool as it enables you to duplicate any sort of input in a Form with a click of a button!. I have used this plugin in many of my projects and it has worked fine for me but except for a single case of another jQuery plugin called Select2. Just like form repeater Select2 is another awesome jQuery plugin which gives you a customizable select box with support for searching, remote data sets, tagging, infinite scrolling and many other useful options. But it has been a long standing problem for many developers to make Select2 work with jQuery form repeater.

The problem:

It’s all in the way both these plugins work by default. The Form Repeater duplicates the specified input on a button click but Select2 must be manually initialised using jQuery and is usually initialized on document ready.

The problem arises when you try to duplicate a Select2 field. It does not work because the Select2 is not initialised for the newly duplicated input!. So let us see the workaround to make Select2 work with Form Repeater.

Make Select2 work with jQuery form repeater:

Here is a solution I came up with which involves initialising Select2 on form repeater button click!

A typical jQuery form repeater example:

<form class="repeater">
    
//select input with class select-2 Alaska Hawaii California
</div> <input data-repeater-create type="button" id="repeater-button" value="Add"/> </form>

Notice I have assigned an id="repeater-button" button which triggers the form repeater? We will hook into this button’s mouseover event and execute a jQuery function which will initialise the Select2 for all the inputs with class="select2"

Now just put this script after the body tag.

	$("p").mouseover(function(){
		setTimeout(function(){

			$(".select2").select2({
			    placeholder: "Select a state",
			    allowClear: true
			});	
				  
		}, 100);
	});	

If you execute the above function on button mouseover event it assures that the function is only executed after the inputs have been duplicated and waiting for just 100 milliseconds also guarantees that the input has already been duplicated.

Your Select2 should work now with form repeater!! but just make sure you initialise the original select2 input on document ready!

$( document ).ready(function() {
    $(".select2").select2({ 
        placeholder: "Select a state", 
        allowClear: true 
    }); 
});

What do you think? Is there a better way of doing this? Share your thoughts in the comments below!!

Did you like this article? then consider checking out my posts in the web development category and my projects!

The post How to make Select2 work with jQuery Form Repeater? appeared first on KernelDev.

Leave a Comment

%d bloggers like this: