I want to create a new row when clicking a button and that row should have 2 select2, for some reason when initializing select2, the new row becomes select2 but the old row becomes regular HTML. Does anyone know how to fix this?
<div class="modal fade" role="dialog" id="advanceModal">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 650px">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">{{ __('tm_absenteeism_data_entry_by_employee_no.label_check_if_activated') }}</h6>
</div>
<div class="modal-body">
<div class="row">
<div class="col-5">
<select class="form-control advance_label" id="advance_label" name="advance_label" style="width: 100%">
<option></option>
<option value="GroupCompany">{{ __('tm_absenteeism_data_entry_by_employee_no.label_group_company') }}</option>
<option value="Department">{{ __('tm_absenteeism_data_entry_by_employee_no.label_department') }}</option>
<option value="Location">{{ __('tm_absenteeism_data_entry_by_employee_no.label_location') }}</option>
<option value="WorkingUnit">{{ __('tm_absenteeism_data_entry_by_employee_no.label_working_unit') }}</option>
<option value="EmployeeType">{{ __('tm_absenteeism_data_entry_by_employee_no.label_employee_type') }}</option>
<option value="KelasCabang">{{ __('tm_absenteeism_data_entry_by_employee_no.label_kelas_cabang') }}</option>
<option value="Segmen">{{ __('tm_absenteeism_data_entry_by_employee_no.label_segmen') }}</option>
<option value="Position">{{ __('tm_absenteeism_data_entry_by_employee_no.label_position') }}</option>
<option value="KlasifikasiJabatan">{{ __('tm_absenteeism_data_entry_by_employee_no.label_klasifikasi_jabatan') }}</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<div class="container">
<div class="mr-auto float-left">
<button type="button" class="btn btn-outline-primary" id="btn_add_filter" style="width: 100px; font-size: 12px;"><i class="fa fa-plus"></i> {{ __('tm_absenteeism_data_entry_by_employee_no.btn_add') }}</button>
</div>
<div class="float-right">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal" style="width: 100px; font-size: 12px;">Cancel</button>
<button type="button" class="btn btn-primary" id="btn_apply" style="width: 100px; font-size: 12px;">{{ __('tm_absenteeism_data_entry_by_employee_no.btn_apply') }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
$('#btn_add_filter').click(function() {
var newRow = '<div class="row">' +
'<div class="col-5">' +
'<select class="form-control advance_label" id="advance_label" name="advance_label" style="width: 100%">' +
'<option></option>' +
'<option value="GroupCompany">Group Company</option>' +
'<option value="Department">Department</option>' +
'<option value="Location">Location</option>' +
'<option value="WorkingUnit">Working Unit</option>' +
'<option value="EmployeeType">Employee Type</option>' +
'<option value="KelasCabang">Kelas Cabang</option>' +
'<option value="Segmen">Segmen</option>' +
'<option value="Position">Position</option>' +
'<option value="KlasifikasiJabatan">Klasifikasi Jabatan</option>' +
'</select>' +
'</div>' +
'<div class="col-1">' +
'<div class="box-delete">' +
'<i class="fa fa-trash-o"></i>' +
'</div>' +
'</div>' +
'</div>';
$('.modal-body .row:last').after(newRow);
$('.modal-body .row:last .advance_label').select2({
placeholder: "Select Filter"
});
$('.modal-body .row:last .advance_filter').select2({
placeholder: "Select Filter"
});
});
as you can see, i want to create a new row when i clicked a button, but the old row becomes regular HTML. can someone please tell me why and how to fix it? Thanks in advance
Chances are, by the time your
select2initialisation is executed, thenewRowis not appended to the DOM yet. Even though you have sequentially added the statements, it takes few milli/nanoseconds to alter the DOM, by the time which the next statement would have executed. Try to initialise the select2 before attaching to DOM like,