16650016332445937

How to Fix X-editable DataTables Error in Laravel to Run Them Together Tutorial

Laravel 9 provides us with an array of functionality that we can to enhance the efficiency of our web apps. They become far fetching and accurate in many ways. Laravel can be used to beautify our web apps and simplify complex jobs.

In this tutorial we have explained how we can run datatablesjs and x-editablejs together by fixing x-editable databales error in Laravel 9. In Laravel app while using datatables.js and x-editablejs we run into an error which is shown here:

a.fn.popover is undefined

If we use a local version or an older version of BootStrap CDN on datatables this error pops up while loading datatables. This impacts the editing of our code when we edit code with x-editable it lets us edit just the first page of datatables. When we move to other pages we cannot do that. It becomes very frustrating.
How to fix
We can easily fix this issue. All just we need to do is to move x-editable code into datatables and load it in fnRowCallback. See the code example here which shows how we can move x-editable code into datatables.

<script>
    $(document).ready(function() {
        var table = $('#mydata').DataTable({
            "fnRowCallback": function( nRow, mData, iDisplayIndex, iDisplayIndexFull) {
                // add x-editable
                $.fn.editable.defaults.mode = 'inline';
                $.ajaxSetup({
                     headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                product_id = $(this).data('pk');
                url = $(this).data('url');

                //make the stock editable
                $('.stock').editable({
                    url: url,
                    pk: product_id,
                    type:"text",
                    validate:function(value){
                      if($.trim(value) === '')
                      {
                        return 'This field is required';
                      }
                    }
                });

                //make this weight editable
                $('.weight').editable({
                    url: url,
                    pk: product_id,
                    type:"text",
                    validate:function(value){
                      if($.trim(value) === '')
                      {
                        return 'This field is required';
                      }
                    }
                });
                //make price editable
                $('.price').editable({
                    url: url,
                    pk: product_id,
                    type:"text",
                    validate:function(value){
                      if($.trim(value) === '')
                      {
                        return 'This field is required';
                      }
                    }
                });
                //make this discount pricing editable
                    $('.newprice').editable({
                    url: url,
                    pk: product_id,
                    type:"text"
                });
                // using only class not id, needs to use with multiple records
                $('.status').editable({
                  // Note: cleaner to format in the controller and render using the json directive
                  source: [
                      @foreach($statuses as $status)
                          { value: '{{ $status->id }}', text: '{{ $status->title }}' }
                          @unless ($loop->last)
                              ,
                          @endunless
                      @endforeach
                  ]
                });
            },
            //
        });
    });
</script>