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);
}
});