更新部分頁面-有解無憂

我有一個專案，我可以在其中添加元素并選擇它們（它是一個模板創建者）。

這是我的頁面的外觀（以便您更好地理解所有內容），左側是我可以添加的所有不同欄位。
右側是鏈接到我選擇的元素的輸入（如其名稱、對齊方式等...）
中間是可以添加、調整大小和拖動（很快就會洗掉）的元素。

更新部分頁面

基本上，我通過為我添加的每個元素創建我的輸入串列的 div 并根據元素是否被選中來設定 adisplay: none或，從而使一切正常display: block。

這有效，但如果我創建了很多元素，頁面可能會充滿不可見的 div，我正在尋找一種方法來通過 AJAX 更新“元素添加”和“元素點擊”上的輸入。

另外，我用 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 }})。

問題是我發現了很多不同的函式，我知道我需要在我的控制器的回傳中呼叫一個函式（我將從 AJAX 請求和我的“元素點擊”和“元素添加”事件中呼叫）。

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

我是否需要使用 renderBlock、renderView 或其他任何東西？

我只需要更新頁面的正確部分，我還需要存盤不同輸入的值（當我選擇一個元素時，在輸入中輸入一些內容，我需要能夠檢索我輸入的內容）。

這看起來可以從標題中解決我的問題，但頁面會重繪（這對我不起作用）。

uj5u.com熱心網友回復：

你是對的，你應該能夠用函式來解決這個問題renderBlock。該函式renderBlock位于類中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>

uj5u.com熱心網友回復：

我的問題實際上很容易解決，我對 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是您在控制器中呈現的視圖的內容。然后它被添加到您的頁面。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/356364.html

標籤：javascript php 查询 symfony 枝条

上一篇：學說EAVorderBy和搜索

下一篇：如何在vue中使用twig