How to run Datatables.js and x-editabel.js together in laravel

609

After long time not updating this blog today I have interesting article for you. How to run Datatables.js and x-editabel.js together in laravel?

If you're using datatables.js in your app and also x-editable.js you will probably notice a common error

a.fn.popover is undefined

I also published article about x-editable you can find it here.

Error cause

This error caused usually when you use bootstrap 3 CDN version or even local version on tables that loading with datatables. The effect of this error is you are able to edit your codes with x-editable only in page 1 of datatables and when you move to page 2,3,4, etc. you will lose ability of editing your data.

How to fix

The fix is simple, all you have to do is to move your x-editable codes inside datatables and load them in fnRowCallback . Let's take a look at sample code below:

<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 stock editable
                $('.stock').editable({
                    url: url,
                    pk: product_id,
                    type:"text",
                    validate:function(value){
                      if($.trim(value) === '')
                      {
                        return 'This field is required';
                      }
                    }
                });
                
                //make 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 discount price editable
                    $('.newprice').editable({
                    url: url,
                    pk: product_id,
                    type:"text"
                });
                // using class not id, since likely used 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>