JS in external file

Question

JS in external file

Flavio Toscano May '17

Created May '17	Last Reply May '17	Replies 6	Views 898	Votes 0

Flavio Toscano 1.0k

May '17

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?

le51 · Answer 1 · 2017-05-07T09:43:58-07:00

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.phalcon.io/en/latest/reference/assets.html

Flavio Toscano · Answer 2 · 2017-05-07T15:31:54-07:00

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 {{{% endraw %{% raw %}}}} js return the error: Uncaught ReferenceError: data is not defined I´ll take a look at this asset manager.

Flavio Toscano · Answer 3 · 2017-05-07T15:51:20-07:00

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

le51 · Answer 4 · 2017-05-08T00:39:45-07:00

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

le51 · Answer 5 · 2017-05-08T01:40:08-07:00

for dataTables itself, I've seen that you can read "data" objects directly from the html DOM: https://datatables.net/examples/advanced_init/object_dom_read.html

Lajos Bencz · Answer 6 · 2017-05-08T01:52:56-07:00

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 {{{% endraw %{% raw %}}}} js return the error: Uncaught ReferenceError: data is not defined I´ll take a look at this asset manager.

le51 · Answer 7 · 2017-05-08T01:55:06-07:00

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

Wojciech Ślawski · Answer 8 · 2017-05-08T03:43:08-07:00

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

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

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