Afathy-99's avatar

Afathy-99 started a new conversation+100 XP

1w ago

I have a repeater list like this but my problem is when i add 2 items (admins), so the total is 3 admins now only the first item is sent in the request, however when i inspect the elements in the network i see the select elements have different indexes names of 0,1,2 this is my blade:

                <div class="form-group">
                    <div data-repeater-list="admin_responsible_repeater">
                        <div data-repeater-item>
                            <div class="form-group row">
                                <div class="col-md-4">
                                    <label class="form-label">{{ __('Admin') }}:</label>
                                    <span><i class="fa fa-circle-info" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="{{ (array_key_exists('responsible_admin',$tooltip))?$tooltip['responsible_admin']:'' }}"></i></span>
                                    <select class="form-select mb-6" data-control="select2" name="admin_responsible_repeater[0][admin_id]" id="admin_responsible_repeater_0_admin_id_inp"
                                            data-placeholder="{{ __("Choose the admin") }}"
                                            data-dir="{{ isArabic() ? 'rtl' : 'ltr' }}">
                                        <option value=""></option>
                                        @foreach ($admins as $admin)
                                            <option value="{{ $admin->id }}">@lang($admin->name)</option>
                                        @endforeach
                                    </select>
                                    <p class="invalid-feedback" id="admin_responsible_repeater_0_admin_id" ></p>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">{{ __('Stakeholders') }}:</label>
                                    <span><i class="fa fa-circle-info" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="{{ (array_key_exists('responsible_responsibilities',$tooltip))?$tooltip['responsible_responsibilities']:'' }}"></i></span>
                                    <select class="form-select mb-6" data-control="select2" name="admin_responsible_repeater[0][responsibilities]" id="admin_responsible_repeater_0_responsibilities_inp"
                                            data-placeholder="{{ __("Choose the responsibilities") }}"
                                            data-dir="{{ isArabic() ? 'rtl' : 'ltr' }}">
                                        <option value=""></option>
                                        @foreach ($fund_admin_responsibles as $fund_admin_responsible)
                                            <option value="{{ $fund_admin_responsible }}">{{ __($fund_admin_responsible) }}</option>
                                        @endforeach
                                    </select>
                                    <p id="admin_responsible_repeater_message" style="color: red;"></p>
                                    <p class="invalid-feedback" id="admin_responsible_repeater_0_responsibilities" ></p>
                                </div>
                                <div class="col-md-4" style="text-align: end;">
                                    <a href="javascript:;" data-repeater-delete class="btn btn-sm btn-danger mt-3 mt-md-8">
                                        <i class="la la-trash-o"></i>{{ __('Delete') }}
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <!--end::Form group-->

                <!--begin::Form group-->
                <div class="form-group mt-5 text-center">
                    <a href="javascript:" data-repeater-create class="btn font-weight-bold btn-primary" style="width:50%">
                        <i class="la la-plus"></i>{{ __('Add New Responsibility') }}
                    </a>
                </div>
                <!--end::Form group-->
            </div>

and i handle it in js like

$('#admin_responsible_repeater').repeater({ initEmpty: false, isFirstItemUndeletable: true,

        defaultValues: {
            'text-input': 'foo'
        },

        show: function () {
            $(this).slideDown();
            setTimeout(() => {
                console.log('from edit');
                


            const dataRepeaterItems = $('div[data-repeater-list="admin_responsible_repeater"]').children();

                dataRepeaterItems.eq(dataRepeaterItems.length - 1).find('.radio-btn-element').each(function (index, element) {

                    if ($(this).prop('tagName') === "LABEL")
                        $(element).attr('for', $(element).attr('for').replace(/-\d+/, `-${dataRepeaterItems.length}`));
                    else if ($(this).prop('tagName') === "INPUT")
                        $(element).attr('id', $(element).attr('id').replace(/-\d+/, `-${dataRepeaterItems.length}`));

                });
                dataRepeaterItems.eq(dataRepeaterItems.length - 1).find('.form-control').each(function (index, element) {
                    if ($(this).prop('tagName') === "LABEL")
                        $(element).attr('for', $(element).attr('for').replace(/-\d+/, `-${dataRepeaterItems.length}`));
                    else if ($(this).prop('tagName') === "INPUT")
                        $(element).attr('id', $(element).attr('id').replace('0', `${dataRepeaterItems.length - 1}`));
                    var P_TAG = $(element).parent().find('.invalid-feedback')[0];
                    $(P_TAG).attr('id', $(P_TAG).attr('id').replace('0', `${dataRepeaterItems.length - 1}`));
                });
                dataRepeaterItems.eq(dataRepeaterItems.length - 1).find('.form-select').each(function (index, element) {

                    if ($(this).prop('tagName') === "LABEL")
                        $(element).attr('for', $(element).attr('for').replace(/-\d+/, `-${dataRepeaterItems.length}`));
                    else if ($(this).prop('tagName') === "SELECT") {
                        $(this).attr('id', $(element).attr('id').replace('0', `${dataRepeaterItems.length - 1}`));
                        $(this).select2();

                    }
                    var P_TAG = $(element).parent().find('.invalid-feedback')[0];
                    $(P_TAG).attr('id', $(P_TAG).attr('id').replace('0', `${dataRepeaterItems.length - 1}`));
                });

                }, 250);
            
            
        },

        hide: function (deleteElement) {
            $(this).slideUp(deleteElement);
        }
    });