JS in external file

Hi to everyone.

I´m passing some data to a view using this code:

public function indexAction()
    {
        $userId = $this->auth->getId();
        $data = [];
        $contas = Users::findFirst($userId)->accountuser;
        foreach ($contas as $conta) {
            $data[] = [$conta->id, $conta->account->tradename, $conta->profile->name];
        }
        $this->view->data = json_encode($data);
    }

In the view I´m using datables to show the data:

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        var tableadmin = $('#contas').DataTable( {
            "dom": '<"top"f>tp',
            "data": {{ data }},
            "language": {
                "search": "Buscar:",
                "paginate": {
                    "first": "Início",
                    "last": "Final",
                    "next": "Próximo",
                    "previous": "Anterior"
                },
            },
            "columnDefs": [
                {
                    "targets": [ 0 ],
                    "visible": false,
                    "searchable": false
                }
            ]
        } );
        $('#contas tbody').on('click', 'tr', function () {
            var data = tableadmin.row( this ).data()[0];
            window.location.href = '/accounts/select/' + data;
        } );
    });
</script>

Everything is workling fine, but when I put the js script to an external js file using this:

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
{{ javascriptInclude('js/accountindex.js') }}

The data doesn´t appear. Is there anything wrong?



29.8k

Hi,

in view, use:

{{ javascriptInclude('https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js', false) }}
{{ javascriptInclude('https://cdn.datatables.net/1.10.12/js/jquery.dataTables.bootstrap.min.js', false) }}
{{ javascriptInclude('js/accountindex.js') }}

Or much better, asset manager: https://docs.phalconphp.com/en/latest/reference/assets.html

Thanks for the reply, but it doesn´t work either. Looking at google´s console I can see the error: Uncaught SyntaxError: Unexpected token because I´m using "{{ data }}". If I remove the {{}} js return the error: Uncaught ReferenceError: data is not defined I´ll take a look at this asset manager.

I tried with the asset manager but It´s the same problem, the variable data can´t be accessed by the external js file.



29.8k

Ok, I didn't notice that you are trying to pass {{data}} in the js. Because it's just file inclusion with javascriptInclude(), there is no volt compilation.

I use that trick:

  • I display my data in a html tag : <div id="rows" style="visibility:hidden">{{data}}</div>
  • in accountidex.js get #rows content through javascript


29.8k

for dataTables itself, I've seen that you can read "data" objects directly from the html DOM: https://datatables.net/examples/advanced%5init/object%5dom%5read.html

You will have to concatenate the remote resource URL with data:

{{ javascriptInclude('https://some.url/version/package?key='~data~'&param=foo', false) }}

Thanks for the reply, but it doesn´t work either. Looking at google´s console I can see the error: Uncaught SyntaxError: Unexpected token because I´m using "{{ data }}". If I remove the {{}} js return the error: Uncaught ReferenceError: data is not defined I´ll take a look at this asset manager.



29.8k

but the best solution imho is to use ajax request: https://datatables.net/examples/ajax/simple.html

Just use assets manager imho, what exactly you have output from:

{{ javascriptInclude('js/accountindex.js') }}

? What does it return, you sure path is correct?