Javascript doesn't execute when the html is called by a hx-get

I have the following html's that i load in a Django app: 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>

When the bar_chart.html is called by the {% include 'bar_chart.html' %}, the script is executed and the chart is properly displayed.

When the bar_chart.html is called by the Django view called with hx-get="groupdetail/", the script is not executed. The html is displayed, but the graph is not build, because the script is not executing.

Already 2 days now I'm breaking my head on this and searching internet for an answer.

If someone could tell me why this is happening, it would be great.

I tried to put the html that has to be replace in and without , change hx-swap="innerHTML" for hx-swap="outerHTML", but nothing changes.

Back to Top