How Can I Bind Select2 In Edit Mode?

Viewed 35

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;
            }
        }
0 Answers
Related