Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – question about select2, The old row becomes regular HTML and no longer becomes select2

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

Tags:

2

Answers


  1. 0

    Chances are, by the time your select2 initialisation is executed, the newRow is 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,

    const select2Element = $(newRow).select2({
  placeholder: "Select Filter"
});

$('.modal-body .row:last').after(select2Element);
    Login or Signup to reply.
  2. 0

    You could assign a new class with random integer at last of it and then initialize the select2.

    $('#btn_add_filter').click(function() {
var randomnumber = new Date().getTime();
        var newRow = '<div class="row">' +
                        '<div class="col-5">' +
                            '<select class="form-control advance_label select2'+'" 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 .select2'+randomnumber).select2({
            placeholder: "Select Filter"
        });

        $('.modal-body .row:last .select2'+randomnumber).select2({
            placeholder: "Select Filter"
        });
    });

    Just replace your js with it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search