Перенос массива JS в Python с использованием AJAX & Flask - не работает

Question

У меня проблемы с кодом. Мой загрузчик данных на python не работает. Вот мой HTML сайт (с использованием синтаксиса Jinja из базы. html):

{% extends 'base.html' %}
{% block head %}
<title>PPO Count</title>
{% endblock %}

{% block body %}
    <!-- Header -->
    <div class="header">
        <h2 class='title'>Prototype 1: Pet Owner Viz</h2>
    </div>
    <!-- Button Panel-->

    <!-- Vis Box -->
    <div class='canvas'>
        <div class="container">
            <div class='button-box'>
                <button id='Bx' type="button" onclick='toggleClickedBuz("Bx", "Bx")'>Bx</button>
                <button id='By' type="button" onclick='toggleClickedBuz("By", "By")'>By</button>
                <button id='Bz' type="button" onclick='toggleClickedBuz("Bz", "Bz")'>Bz</button>
                <button id='loadData'>Load Data</button>
            </div>
            <div class='viz-box'>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="/static/js/main.js"></script>
{% endblock %}

Обратите внимание на кнопки? Происходит то, что onclick, он входит в массив, используя JS. В итоге, эта функция удаляет дублирующиеся записи и меняет цвет кнопок на экране, чтобы выделить их выбор.

const vizBox = d3.select('.viz-box');
const svg = vizBox.append('svg');


// Create button click array

var clickedBusinesses = [];

function toggle(business) {
    clickedBusinesses[business] = !clickedBusinesses[business];
  };

function getClickedBusinesses() {
return Object.keys(clickedBusinesses).filter(key => clickedBusinesses[key]);
};


// Update array and change button colour to reflect selection
function toggleClickedBuz( bizStr , id ) {
    if(clickedBusinesses.includes(bizStr)){
       // removing duplicate element from that array, dependant on button pressed
       clickedBusinesses = clickedBusinesses.filter( cb => cb !== bizStr );
       document.getElementById( id ).style.backgroundColor='white';
    }else{
        // else push it to the array
       clickedBusinesses.push(bizStr)
       document.getElementById( id ).style.backgroundColor='red';
    }
    var json_string = JSON.stringify(clickedBusinesses)
    console.log(json_string)
};

window.onload = function() {
    d3.select('loadData').onclick = function() {
        doWork()
    };
}

function doWork() {
    $.post('receiver', json_string, function() {

    });
event.preventDefault();
}

button id = 'loadData' не работает, я не могу получить свой jsonified JS массив в python. Есть мысли?

Answer 1

d3.select не возвращает собственный узел DOM, он возвращает так называемый d3-selection, который ничего не знает о onclick. Вместо этого вы должны использовать .on метод d3-selection для регистрации прослушивателей событий, как описано здесь: https://github.com/d3/d3-selection#handling -events

Альтернативы:

Вместо используя d3 для выбора элементов, используйте собственный метод .querySelector: document.querySelector('#loadData').onclick = ....

Или используйте для него jQuery: $('#loadData').on('click', ...).