symfony 6 sortable row with sortable.js

Question

In my view I have

<table class="table table-striped bg-white table-sm">
        <thead>
        <tr>
            <th scope="col">Název</th>
            <th scope="col">Text</th>
            <th scope="col">Pořadí</th>
            <th scope="col">Smazat</th>
        </tr>
        </thead>
        <tbody class="list-group" id="listWithHandle">
        {% for userSample in samples %}
            <tr class="list-group-item">
                <td>
                    <span class="glyphicon glyphicon-move" aria-hidden="true"></span></td>
                Drag me by the handle
                <td class="pe-5">{{ userSample.sample.name }}</td>
                <td class="pe-5">{{ userSample.sample.text }}</td>
                <td class="pe-5">{{ userSample.position}}</td>
                <td class="pe-5"><td><a href="{{ path('delete_user_template', {id: userSample.id}) }}"><i class="fa fa-trash"></i></a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

I try the row in table may be oreordered by drag and drop. I find the javascipt library Sotrable.js that looks very fine https://github.com/SortableJS/Sortable. In symfony i use webpack encore, I install sortable through napm and in my app.js i Have the line

import Sortable from 'sortablejs';

but after compiling In console i see error that

Sortable is not defined in view I have block

<script>
        // Simple list
        Sortable.create(simpleList, { /* options */ });

        // List with handle
        Sortable.create(listWithHandle, {
            handle: '.glyphicon-move',
            animation: 150
        });

but sortable is not function

Please check source code of page and see js is included and can access without any error — Ravi Damasiya
– Ravi Damasiya, Commented Mar 8, 2024 at 7:20

Clément DELORD · Accepted Answer · 2025-03-17 09:27:17Z

0

You need to put the Sortable variable in the global scope to access it later :

In your entrypoint (app.js) you can do :

import Sortable from 'sortablejs';
window.Sortable = Sortable

Then you'll be able to access it in your inline script (be carefull to import your script before you try to access the variable)

edited Mar 17 at 9:27

answered Mar 7, 2024 at 13:36

Clément DELORD

616 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mardon Over a year ago

neither this stiil produce same error

Collectives™ on Stack Overflow

symfony 6 sortable row with sortable.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related