Переменные не меняются после ajax

Question

Есть такие шаблоны flask:

base.html co всеми необходимы библиотеками:

<!DOCTYPE html>
<html lang="en">

<head>
            ...
</head>
<body>
            ...
    <div class="container">
      {% block content %}{% endblock %}
    </div>
            ...
</body>
</html>

sent_outter.html:

{% extends 'base.html' %}
{% block content %}
{{ super() }}

...некоторый контент
...некоторый контент

<div id="sent_outter">
    {% include 'sent_inner.html' %}
</div>
<button id="new_sent" type="submit" class="btn">Новый контент в sent_inner</button>
{% endblock %}

sent_inner.html:

<div id="sent_inner">
    <div id="target_w_r" class="d-none">{{ target_w_r }}</div>

    <div class="row-cols-auto">
        {% for w_r in target_list_r %}
        <button type="button" class="btn btn-source">
            {{ w_r }}
        </button>
        {% endfor %}
    </div>    
</div>

Далее main.py:

@app.route('/sent')
def sent():
    ...
    target_w_r = ...
    target_list_r = ...(список слов для кнопок ".btn-source")
    ...

    variables = {
        'target_w_r':  target_w_r, 'target_list_r': target_list_r
    }

    return render_template('sent_outter.html', **variables)

ajax.js:

$(function () {
  $("#new_sent").on("click", function (e) {
      e.preventDefault();
      $("#sent_outter").load("/sent #sent_inner")
    });
});

sent.js:

$(function () {
    var target_w_r = $("#target_w_r").text();
    var text_r_array = target_w_r.trim().split(" ");
      
    $("#sent_outter").on("click", ".btn-source", function () {
      var value = $(this).text().trim();
      var r_idx = text_r_array.indexOf(value);
      ...
      ...
      }
    ...
    ...
});

Проблема заключается в том, что при обновлении шаблона sent_inner (через ajax.js), переменные target_w_r и, соответственно, text_r_array (sent.js) не обновляются. При отладке в chrome при нажатии любой кнопки ".btn-source" переменная target_w_r останется старая (которая была до применения ajax.js). Текст на кнопках меняется правильно, и value (sent.js) также (я так понимаю, потому, что он берется из py-файла). А вот переменная r_idx (sent.js) не меняется. При обновлении страницы этого не происходит и скрипт sent.js отрабатывает правильно. Я понимаю, что при использовании AJAX не весь DOM перестраивается, а только часть страницы, которая была запрошена через AJAX. Но у меня не получается сделать правильно. Прошу помощи в решении.

Answer 1

⛔ Вероятно, этот ответ создан с использованием ChatGPT.

✅ Этот ответ является корректным, однако непонятно, действительно ли решаемая проблема совпадает с описываемой в вопросе.

Предполагаю, что проблема заключается в том, что когда вы обновляете шаблон sent_inner через AJAX, он загружается из кэша браузера, и переменные, определенные в контексте шаблона при первоначальной загрузке страницы, не обновляются.

Чтобы решить эту проблему, вы можете добавить параметр timestamp к URL-адресу, который вы загружаете через AJAX, чтобы заставить браузер загрузить свежую версию файла, а не использовать кэшированную версию.

Измените эту строку в ajax.js:

$("#sent_outter").load("/sent #sent_inner")

на эту:

$("#sent_outter").load("/sent?_=" + new Date().getTime() + " #sent_inner")

Таким образом, мы добавляем временную метку в виде _=timestamp к URL-адресу, чтобы заставить браузер загрузить свежую версию страницы при каждом запросе.

Это должно решить проблему обновления переменных при загрузке шаблона sent_inner через AJAX.

БЛОГ НА HUSL

Переменные не меняются после ajax

Ответы (1 шт):

⛔ Вероятно, этот ответ создан с использованием ChatGPT.

✅ Этот ответ является корректным, однако непонятно, действительно ли решаемая проблема совпадает с описываемой в вопросе.