I have a Laravel application where have a form, In this form, have a dynamic Table with three columns. Columns are 'Ledger', 'Balance' and 'Amount'. Also have a 'Add' button to add new row with controls in table. 'Ledger' column is a Select2 and 'Balance' and 'Amount' columns are input-text. Also I am getting Select2 data through Ajax Call for new mode, and everything is working fine. I am facing problem in Edit mode, when I getting data from database and trying to bind this form Select2, not binding.
How can I bind Select2 in Edit mode?
<table class="table table-bordered w-100">
<thead class="table-light">
<tr>
<th scope="col">ACCOUNT</th>
<th scope="col" class="text-end">BALANCE</th>
<th scope="col" class="text-end">AMOUNT</th>
</tr>
</thead>
<tbody id="dynamicTable">
@foreach ($accVoucherDetail as $item)
<tr>
<td class="p-0" style="width: 35%;">
<select class="account form-control border-0" name="account[]">
</select>
</td>
<td class="p-0" style="width: 15%;">
<input type="text" name="balance[]"
class="form-control border-0 text-end" />
</td>
<td class="p-0" style="width: 15%;">
<input data-parsley-type="number" type="text" id="debit[]"
name="debit[]" class="form-control debit border-0 text-end"
style="font-size:18px"
value="{{ $item->amount < 0 ? $item->amount : '' }}">
</td>
</tr>
@endforeach
</tbody>
</table>
$(document).ready(function() {
initSelect2();
});
function initSelect2() {
$(".account:not(.initialized)").addClass('initialized').select2({
placeholder: 'Select an account',
templateResult: formatProduct,
templateSelection: formatProductSelection,
ajax: {
url: '/customer/list/api',
type: 'POST',
dataType: 'json',
delay: 250,
data: function(params) {
return {
_token: "{{ csrf_token() }}",
q: params.term, // search term
page: params.page || 1
};
},
processResults: function(data, params) {
params.page = params.page || 1;
return {
results: data.data,
pagination: {
more: (params.page * 10) < data.total
}
};
},
autoWidth: true,
cache: true
}
});
function formatProduct(ledger) {
if (ledger.loading) {
return ledger.text;
}
var $container = $(
"<div class='select2-result-product clearfix'>" +
"<div class='select2-result-product__title'></div>" +
"</div>" +
"</div>"
);
$container.find(".select2-result-product__title").text(ledger.ledger_name);
return $container;
}
function formatProductSelection(ledger) {
return ledger.ledger_name || ledger.text;
}
}