更新部分页面

Question

我有一个项目，我可以在其中添加元素并 select 它们（它是一个模板创建器）。

这是我的页面的外观（以便您更好地理解所有内容），左侧是所有不同的我可以添加的字段。
右边是链接到元素 I select 的输入（例如它的名称、对齐等...）
中间是可以添加、调整大小和拖动（很快就会删除）的元素。

基本上，我通过为我添加的每个元素创建一个 div 输入列表，并根据是否设置 display: none 或 display: block元素是否 selected。

这可行，但如果我创建大量元素，页面可能充满不可见的 divs，我正在寻找一种通过 [=46] 上的 AJAX 更新输入的方法=] 和 'element click'.

另外，我用 Symfony 做了这个项目。现在我有一个 _inputs.html.twig 文件，其中有一个 div 我的所有输入和在调用视图时指定的 ID。

{% 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 %}

它基本上是我所有的输入和元素的 id ({{ id }})。

问题是我发现了很多不同的函数，我知道我需要在我的控制器的 return 中调用一个函数（我将从 AJAX 请求和我的 'element click' 和 'element add' 事件）。

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

我需要使用 renderBlock、renderView 或其他任何东西吗？

我只需要更新页面的右侧部分，我还需要存储不同输入的值（当我 select 一个元素，在输入中输入一些东西时，我需要能够检索我输入的内容）。

看起来可以从标题中解决我的问题，但页面会刷新（这对我不起作用）。

Answer 1

你是对的，你应该可以用函数 renderBlock 来解决这个问题。函数 renderBlock 位于 class Template 中，因此您需要先加载模板才能使用函数

$template = $twig->load('template.html');
$template->renderBlock('render_inputs', [
    'id' => $id,
]);

通常我会在我的块中放置一个容器，这样我就可以轻松地更新所述块的 HTML，例如

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    </head>
    <body>
        <button type="button" id="refresh">Refresh</button>
        {% block some_block_name %}
        <section id="some_block_name">
            Lorem ipsum
        </section>
        {% endblock %}
        <script>
        $(function() {
            $(document).on('click', '#refresh', function() {
                $.get('http://www.example.com/ajax/update.php', function(html) {
                    $('#some_block_name').html(html);
                });
            });
        });
        </script>
    </body>
</html>

Answer 2

我的问题其实很容易解决，我对Ajax工作原理的理解太基础了。

我只需要创建一个视图（一个树枝文件），其中包含我需要刷新的内容并将其放在我想要的位置。

在触发更新的myEvent上，您需要：

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

);

然后在控制器中创建一个与 url/you/need/to/call 相匹配的新函数：

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

在您的 JS 函数中，html 是您在控制器中呈现的视图的内容。然后它被添加到您的页面。

更新部分页面

Update part of page

javascript

php

jquery

symfony

twig