Javascript не выполняется, когда html вызывается с помощью hx-get

У меня есть следующие html-файлы, которые я загружаю в приложение Django: pie_chart.html

{% load i18n %}

<div id="chartcontainer" >
    <div style= "width: 400px;" "height: 400px;">
        <canvas id="pie-chart"></canvas>
        <b>Balance: </b> {{balance}}<br>
        
    </div>
    <div>
        <h5>Detail group: 
            <select name="group" id="group"
                hx-get="groupdetail/"
                hx-trigger="click changed delay:1s"
                hx-target="#groupchart"
                hx-include="[name='year']"
                hx-swap="innerHTML"
            >}
            {% for l in labels %}
                {% if l == groupcode %}
                    <option value={{l}} selected>{{l}}</option>
                {% else %}
                    <option value={{l}}>{{l}}</option>
                {% endif %}
            {% endfor %}
        </select>
        </h5>
    </div>
    
    <div id=groupchart>
        {% include 'bar_chart.html' %}
    </div>
</div>

 <script>
var config_pie = {
     type: 'pie',
     data: {
       datasets: [{
         data: {{ data|safe }},
         backgroundColor: {{ backgroundcolor|safe }},
         label: 'Amount_EUR',
       }],
       labels: {{ labels|safe }}
     },
     options: {
       responsive: true
     }
   };
  
var ctx_pie = document.getElementById('pie-chart').getContext('2d');
window.myPie = new Chart(ctx_pie, config_pie);
</script>

bar_chart.html

{% load i18n %}

<div>
    <div style= "width: 400px;" "height: 400px;">
        <canvas id="group-chart"></canvas>
        <b>Balance: </b> {{groupbalance|safe}} <br>
        <p id="data"> her should com the config_bar var</p>
    </div>
</div>

<script>
    var config_bar = {
        type: 'bar',
        data: {
          datasets: [{
            data: {{ groupdata|safe }},
            backgroundColor: {{ backgroundcolor|safe }},
            label: 'Amount_EUR',
          }],
          labels: {{ grouplabels|safe }}
        },
        options: {
            indexAxis: 'y',
            responsive: true
        }
    };
    
    var ctx_bar = document.getElementById('group-chart').getContext('2d');
    
    window.myBar = new Chart(ctx_bar, config_bar);
    document.getElementById("data").innerHTML = config_bar;
</script>

Когда bar_chart.html вызывается командой {% include 'bar_chart.html' %}, скрипт выполняется и график отображается правильно.

Когда bar_chart.html вызывается представлением Django, вызванным с hx-get="groupdetail/", скрипт не выполняется. html отображается, но график не строится, потому что скрипт не выполняется.

Уже 2 дня ломаю голову над этим и ищу ответ в интернете.

Если кто-то может сказать мне, почему это происходит, было бы здорово.

Я попытался поместить html, который должен быть заменен в и без, изменить hx-swap="innerHTML" на hx-swap="outerHTML", но ничего не меняется.

Вернуться на верх