Strange data return after select > form with Symfony

caeema

Hi guys,

I'm trying to implement Datatable with a "select all" and a select for each row functionnality.
Here is my context: Symfony 4.4.1 and Datatable 1.10.20.

Basically, my table is really simple, wit 3 columns: [select checkbox] | Email address | Username

So here is my view:

<form action="{{ path('admin_mailing_send_user', {'id': mailing_id} ) }}" id="user_list_form" method="post">
    <table class="table table-striped table-bordered" id="selectable_users">
        <thead>
            <tr>
                <th><input name="select_all" value="1" id="select-all" type="checkbox" /></th>
                <th><strong>Email</strong></th>
                <th><strong>Name</strong></th>
             </tr>
         </thead>

         <tbody>
               {% for user in usersList %}
                    <tr>
                        <td></td>
                        <td>[ ID: {{ user.id}} ] - {{ user.email }}</td>
                        <td>{{ user.lastname }} {{ user.insertion }} {{ user.firstname }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    <button id="submit-btn" type="submit">Submit</button>
</form>

And here, my JS code:

<script>
        $(document).ready(function() {

            var table = $('#selectable_users').DataTable( {
                'paging': false,
                'searching': false,
                'ordering': false,
                'columnDefs': [{
                    'targets': 0,
                    'searchable':false,
                    'orderable':false,
                    'className': 'dt-body-center',
                    'render': function (data, type, full, meta){
                        return '<input type="checkbox" name="user_id[]" value="user_id[]">';
                    }
                }],
                order: [[ 1, 'asc' ]],
            } );

            $('#select-all').on('click', function() {

                var rows = table.rows({ 'search': 'applied' }).nodes();
                $('input[type="checkbox"]', rows).prop('checked', this.checked);
            });

            $('#selectable_users').on('click', function ( ) {
                $(this).addClass('selected');
            })

            $('#submit-btn').click(function (e) {

                var selectedUsers = $(".selected input");
                console.log(selectedUsers);

                $.ajax({
                    type: "POST",
                    url: "{{ path('admin_mailing_send_user', {'id': mailing_id} ) }}",
                    data: selectedUsers.serializeArray()
                });
            });
        });
</script>

**But in my Controller, the data returned are very strange: **

public function sendToUser(Request $request, Mailing $mailing)
{
        if ($request->isXmlHttpRequest()) {

            $values = json_decode($request->get('values'));
            dump($values);
        }

        dump($request->getContent());

        // ....
}

dump($request->getContent()); give me this strange result: "user_id%5B%5D=user_id%5B%5D&user_id%5B%5D=user_id%5B%5D"

If somebody can help me to understand my mistake.. Thanks!

allan

I think this is more of a general jQuery question about serializeArray() rather than being DataTables specific.

Have a look at the jQuery param documentation to understand what your selectedUsers.serializeArray() call is doing.

Stackoverflow might be a better place to ask general jQuery questions.

Allan

caeema

Thanks for your time and advices ! I'll have a look for this, not really good with jQuery