The array from the JS file is not being sent to the symfony controller

Question

There is a controller - MainController, it has a save Changes function, to which you need to pass an array from a Javascript file. Whatever I tried, everything does not fit, an empty request is output.

JS:

'use strict';

$(function () {

    $("#saveTableChange").click(function(e){
        var arrayMiss = [];
        $("#Table td").each(function(key){
            var arr= [];
            if($(this).attr('id').includes('TableName')===false) {
                if($(this).text()!==""){
                    arr.push($(this).attr('id'),$(this).text());
                    arrayMiss.push(arr);
                }
            }
        });


        $.ajax({
            type: "POST",
            traditional: true,
            url: "../savechanges",
            data: JSON.stringify(arrayMiss),
        });
    });
} )(jQuery);

Controller:

  /**
     * @Route("/savechanges", name="save_changes")
     * @param Request $request
     */
    public function saveChanges(Request $request)
    {

        if ($request->isXmlHttpRequest()) {
            dump($request->getContent());
        }
        echo json_encode($request);
        die();    

    }

Answer 1

Two files are created with the same names, but with different types. The first one that is created from jquery has an array, but the second one that is created from <form action="{{ path('save_changes') }}" method="POST" id="formTableChange"> does not have this array. After redirection, the file with the array disappears, only the one that was created by redirection remains

twig

`{% extends 'main/base.html.twig' %} {% block body %}

<div class="container-fluid">
    <div class="row no-gutters justify-content-center mt-5">
        <div class="col-12 col-lg-6 col-md-6">
            <h1 class="display-4 text-center">
                {{ thisUser_group }}
            </h1>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row no-gutters justify-content-center mt-5">
            <div id="app">

            <form action="{{ path('save_changes') }}" method="POST" id="formTableChange">
            <table id="Table">
                 <th id="TableNAME" rowspan="2"> NAME</th>
                 <th id="TableMonth" colspan="{{ daysInMonth }}"><a href=""><</a>{{ monthList[monthNow-1] }}<a href="">></a>
                  <tr>

                 {% for i in range(1,daysInMonth) %}
                 <th>{{ i }}</th>
                 {% endfor %}
                                      </tr>
                                             </th>
                 {% for user_group in users_group %}

                   <tr>
                         <td id="TableName_{{ user_group.id }}">
                        {{ user_group.username }}
                        </td>
                         {% for i in range(1,daysInMonth) %}
                         <td contentEditable="true" id="{{ yearAndMonthNow }}-{{ i }}_{{ user_group.id }}"> </td>
                         {% endfor %}
                    </tr>
                {% endfor %}
                </table>
                <button id="saveTableChange">Save</button>
            </form>
    </div>
</div>

{% endblock %} {% block addjs %} {% endblock %}`

Answer 2

It's hard to know without seeing you html, but looks like your button in inside a form, and the click is submitting it, as that's the default behavior of buttons. To prevent it just disable the default functionality with .preventDefault().

$("#saveTableChange").click(function(e){
    e.preventDefault();
    var arrayMiss = [];
    // Rest of the code
});