I receive the data, but the table does not appear, nor does the "Post" request. Do you have any idea

Alexyno8 · March 2020

I will attach images from two projects. The one on the left is a test (which works), and the one on the right is the main project, which does not work.
I used yajra datatables laravel package.

Thank you!

https://i.imgur.com/6HhB9M1.png
https://i.imgur.com/VTVsH56.png
https://i.imgur.com/QaswB6z.png
https://i.imgur.com/CbCelzJ.png
https://i.imgur.com/1sgeKfy.png

kthorngren · March 2020

Thats a lot of code to dig through. Plus screenshots are very difficult to look at. Can you narrow down the problem a bit and just post the text code you are asking about? Make sure to use the triple back ticks to format your code, see the markdown technote for more info. Even better is posting a link to the page that is not working so we can take a look.

Do you get any errors in your browser's console?

Kevin

Alexyno8 · March 2020

https://i.imgur.com/yLUwmmK.png - Data recived

tangerine · March 2020

Kevin asked you to post some code - not another screen shot - or preferably a link to a page showing the problem.
He also asked if you are getting errors in your browser's console.
Dealing with the responses you are getting is the best way to get help.

Alexyno8 · March 2020

Sure!
Route:

Route::group(['prefix' => 'orders', 'middleware' => 'auth'], function() {

    Route::get('/list', 'OrderController@readOrder')->name('orders_list');
    Route::post('order-all', ['as'=>'order-all', 'uses'=>"OrderController@readOrder"]);
etc...

Controller:

  // Read orders
    public function readOrder()
    {
        $orders = Order::with('products')->orderByRaw('created_at DESC');

        // return DataTables::eloquent($orders)->make(true);
        return Datatables::eloquent(Order::query())->make(true);
    }

View:

@extends('partials.layout')

@section('content')
    <div class="row">

            <div class="title col-sm-6">
                <a href="{{ route('add_order') }}" class="btn btn-primary" style="margin-top: 15px;">Adauga comanda</a>
            </div>

            <form action="{{ route('filtru_comanda') }}" method="post" class="filter-form">
                @csrf
                <div class="row filters ordersButtons">


                        <div class="filter-group-category col-sm-5">
                            <label for="product_series" class="filter-label">DE PE: </label>
                            <input type="date" name="from" class="filter-input" required />
                        </div>
                        <div class="filter-group-category col-sm-5">
                            <label for="product_series" class="filter-label">PANA PE:</label>
                            <input type="date" name="to" class="filter-input" required />
                        </div>
                        <button type="submit" class="filter-button"  style="margin-top:0; display:block;" name="apply_filter" >Filtreaza comenzi</button>

                </div>
            </form>

    </div>

     <div class="row">
        <div class="col-md-4 success">
            @if(Session('success'))
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Detalii cerere</h3>
                    </div>
                    <div class="panel-body">
                        <p style="color: #76d38d; font-size: 18px;">{{ Session('success') }}</p>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <div class="panel">
        <div class="panel-heading">
            <h3 class="panel-title">Lista Comenzi</h3>
        </div>
        <div class="panel-body " style="overflow-x: auto;">
            <table class="table table-hover display" id="readOrder">
                <thead>
                <tr>
                    <th>id</th>
                    <th>Nume Client</th>
                    {{--  <th>Telefon Client</th>
                    <th>Nume Produs</th>
                    <th>Pret Produs</th>
                 + Another column here...--}}
                </tr>
                </thead>
                <tbody>

                </tbody>

            </table>

        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> 
    <script>
    $(document).ready(function() {
        console.log('x'); 
        $('#readOrder').DataTable({
            serverSide: true,
            ajax: {
                url: '{{ route('order-all') }}',
                type: 'POST',
                dataSrc: function (json) {
                    return json.data;
                },
                data: {
                    "_token": "{{ csrf_token() }}"
                }
            },
            columns: [
                { data: 'id',              name: 'id'           },
                { data: 'client_name',     name: 'client_name'  },

            ]
        });
    });
    </script>

@endsection

Error from console:

DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js.map
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.postload.js.map
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js.map
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.postload.js.map

Thank You!

colin · March 2020

When you say the POST request doesn't appear, are you saying the server doesn't receive the request from serverSide? Or does the server respond but the client doesn't receive the response?

Colin

kthorngren · March 2020

in "network> XHR" there is no request for the type of post

Is console.log('x'); outputting properly?

Does url: '{{ route('order-all') }}', create a valid URL? Do you see a post if you hard code a URL, for example: url: 'myURL',` where myURL is a valid path to your server script?

Kevin

Alexyno8 · March 2020

There is no output for console log.
Also, if I comment on this part of code:

             /*serverSide: true, */
                /*    ajax: {
                        url: '{{ route('order-all') }}',
                        type: 'POST',
                        dataSrc: function (json) {
                            console.log(json.data);

                        },
                        data: {
                            "_token": "{{ csrf_token() }}"
                        }
                    },
                    columns: [
                        { data: 'id',              name: 'id'           },
                        { data: 'client_name',     name: 'client_name'  },

                    ] */

I don't know how, but the data is still sent in that form.I think the problem is ajax, but I can't figure out what it is.

I changed the url : url: '/orders/list', , the result is the same

kthorngren · March 2020

If console.log('x'); isn't being displayed then there is something causing the <script> section to not run. Maybe there is a syntax error in your generated page. Try viewing the generated source page and validating it using W3C Validator.

Kevin

kthorngren · March 2020

I'm not familiar with Laravel but this section of code doesn't look right:

                <tr>
                    <th>id</th>
                    <th>Nume Client</th>
                    {{--  <th>Telefon Client</th>
                    <th>Nume Produs</th>
                    <th>Pret Produs</th>
                 + Another column here...--}}
                </tr>

Kevin

Alexyno8 · March 2020

{{--  <th>Telefon Client</th>
    <th>Nume Produs</th>
    <th>Pret Produs</th>
 + Another column here...--}}

This part of code is just a comment. I haven't been able to find a solution yet..

kthorngren · March 2020

Can you post a link to your page so we can take a look?

Did you try the W3C Validator?

If the console.log('x'); is not being output then I would say its not a Datatables issue but something else with the page.

Kevin

Alexyno8 · March 2020

I solved the problem.
Wrong:
Route::get('/list', 'OrderController@readOrder')->name('orders_list');
Route::post('order-all', ['as'=>'order-all', 'uses'=>"OrderController@readOrder"])->name('order-all');

Correct :

    Route::get('/list', 'OrderController@getAllOrder')->name('orders_list');
    Route::post('order-all', 'OrderController@readOrder')->name('order-all');

The problem is that we call the same method from the controller. I had to return a view first.

Thank you for your help and your time!
Thank you, Kevin!

I receive the data, but the table does not appear, nor does the "Post" request. Do you have any idea

I receive the data, but the table does not appear, nor does the "Post" request. Do you have any idea

Answers

Howdy, Stranger!

Categories

DataTables

I receive the data, but the table does not appear, nor does the "Post" request. Do you have any idea

I receive the data, but the table does not appear, nor does the "Post" request. Do you have any idea

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables