[FIXED] Update part of page

Issue

I have a project where I can add elements and select them (it is a template creator).

• Here is how my page looks (so that you understand everything better), on the left there is all the different fields I can add.
• On the right is the inputs that are linked to the element I select (like its name, alignement, etc...)
• On the middle are the elements a can add, resize, and drag (and soon delete).

Basically I've made everything work by creating a div of my list of inputs for each element I add, and by setting a display: none or display: block according on wether the element is selected or not.

This works but if I create a lot of elements, the page can be full of invisible divs, I am looking for a way to update the inputs via AJAX on 'element add' and 'element click'.

Also, I made this project with Symfony. For now I have a _inputs.html.twig file where there is a div of all my inputs with and id that is specified when calling the view.

{% block body %}
<div id="inputs_{{ id }}" style="display: none;"><div class="form-floating p-2">
        <input id="{{ id }}_name" class="form-control bg-primary text-light">
        <label class="text-light">Nom</label>
    </div><hr><div class="form-floating p-2">
        <input id="{{ id }}_alignement" class="form-control bg-primary text-light">
        <label class="text-light">Alignement</label>
    </div><hr><div class="form-floating p-2">
        <input id="{{ id }}_font_size" class="form-control bg-primary text-light">
        <label class="text-light">Taille de police</label>
    </div><hr><div class="form-floating p-2">
        <input id="{{ id }}_bold" class="form-control bg-primary text-light">
        <label class="text-light">Gras</label>
    </div><hr><div class="form-floating p-2">
        <input id="{{ id }}_prefix" class="form-control bg-primary text-light">
        <label class="text-light">Préfixe</label>
    </div><hr><div class="form-floating p-2">
        <input id="{{ id }}_path" class="form-control bg-primary text-light">
        <label class="text-light">Chemin</label>
    </div><hr></div>
{% endblock %}

It basically is all my inputs with the id of the element ({{ id }}).

The thing is I've found a lot of different function, I know I need to call a function in the return of my Controller (which I will call from an AJAX request and my 'element click' and 'element add' events).

return $this->??????('render_inputs', [
        'id' => $id,
    ]);

Do I need to use renderBlock, renderView or anything else ?

I only need the right part of the page to update and I also need to store the values of the different inputs (when I select an element, type something in the inputs, I need to be able to retrieve what I typed).

This looks like something that would solve my problem from the title but the page gets refreshed (which doesn't work for me).

Solution

My problem was actually very easy to solve, my understanding of how Ajax works was just too basic.

I simply needed to create a view (a twig file) containing what I needed to be refreshed and put it where I want.

On myEvent which triggers the update, you need :

$.get(
    'url/you/need/to/call',
    function(html) {
        $('#divWhereContentIsUpdated').html(html);
    },

);

Then create a new function in your controller which matches the url/you/need/to/call :

return $this->render('template/viewToAdd.html.twig', [
        'params' => $params // you maybe don't need to pass parameters, but can
    ]);

In your JS function, html is the content of the view you rendered in your controller. Then it is added to your page.

Answered By - HectoB