melx's avatar
melx
OP
5 years ago
Level 4

Select2 basic example not working

js-example-basic-single does not works when i want to add append div, but in html it works well.

        <script type="text/javascript">

            $(document).ready(function() {
                $(".js-example-basic-single").select2();
            });


             $('.addRow').on('click',function(){
              

                addRow();
              });
              function addRow()
              {
                var div=
                     '<div class="form-group ">'+
                        '<div class="input-group">'+
                        '<span class="input-group-addon remove3"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></span>'+
                        '<select name="slave_ID[]" class="form-control js-example-basic-single" required="" data-live-search="true">'+
                            '<option value=" ">[SELECT SLAVE]</option>'+
                                '@foreach($Slave as $key=>$dt)'+
                                '@if($dt->devicetype ==2)'+
                            '<option value="{{$dt->unit_id}}">{{$dt->Devicenumber}}</option>'+
                            '@endif'+
                            '@endforeach'+

                        '</select>'+
                    '</div>'+
                        '</div>' ;
                $('#slaveID').append(div);
              };
              $('.remove').live('click',function(){
                var last=$('#tdy tr').length;
                if(last==1){
                  alert("you can not remove last row");
                }
                else{
                  $(this).parent().parent().remove();
                }
                
              });

what could be the error here, kindly help me

0 likes
4 replies
guybrush_threepwood's avatar

Hi @emfinanga

You're initializing select2 for all DIVs with the class js-example-basic-single on document ready, but the DIVs don't exist yet.

You need to initialize them each time you add a new row:

              function addRow()
              {
                var div=
                     '<div class="form-group ">'+
                        '<div class="input-group">'+
                        '<span class="input-group-addon remove3"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></span>'+
                        '<select name="slave_ID[]" class="form-control js-example-basic-single" required="" data-live-search="true">'+
                            '<option value=" ">[SELECT SLAVE]</option>'+
                                '@foreach($Slave as $key=>$dt)'+
                                '@if($dt->devicetype ==2)'+
                            '<option value="{{$dt->unit_id}}">{{$dt->Devicenumber}}</option>'+
                            '@endif'+
                            '@endforeach'+

                        '</select>'+
                    '</div>'+
                        '</div>' ;
                $('#slaveID').append(div);
                $(".js-example-basic-single").select2();
              };

I'd recommend adding an ID to each newly created DIV (so you can initialize only the added item, otherwise you'll be reinitializing all controls each time you add a new select).

Here's a working example: https://jsfiddle.net/174c0z5e/

guybrush_threepwood's avatar

By the way, there's no need to escape blade directives:

var div=
	'<div class="form-group ">'+
		'<div class="input-group">'+
			'<span class="input-group-addon remove3"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></span>'+
			'<select name="slave_ID[]" class="form-control js-example-basic-single" required="" data-live-search="true">'+
				'<option value=" ">[SELECT SLAVE]</option>'+
				@foreach($Slave as $key=>$dt)
					@if($dt->devicetype ==2)
					    '<option value="{{$dt->unit_id}}">{{$dt->Devicenumber}}</option>'+
					@endif
				@endforeach
			'</select>'+
		'</div>'+
	'</div>' ;

Please or to participate in this conversation.