Почему моя страница не обновляется?

Question

Я сделал простую викторину с одним вопросом для ответа; когда пользователь отправляет форму, ответ отправляется в базу данных MySQL. Затем запускается функция, которая выполняет запрос базы данных и преобразует данные в таблицу базы данных в JSON, которые затем визуализируются с использованием сценария D3.

Полный код here on github, и я включил фрагменты ниже.

My question: index.php page first load, a D3 script takes the JSON and builds a small bar chart which is displayed next to the from. Скриншот here.

Проблема, с которой я сталкиваюсь, заключается в том, что после того, как пользователь отправит форму, хотя база данных обновлена ​​правильно, страница не обновляется. Это означает, что JSON и гистограмма не обновляются.

Мне нужно вручную обновить (command-r), чтобы увидеть правильную (обновленную) визуализацию.

Что я пытаюсь выполнить: чтобы обновить диаграмму при нажатии «Отправить», чтобы обновленные результаты были представлены пользователю.

Я не знаю, что я делаю неправильно, и могу использовать указатель на то, нужно ли мне смотреть на PHP или JavaScript, чтобы обновить диаграмму (и страницу для перезагрузки обновленного JSON) форма submit.

Index.php:

<form action="form.php" method="post"> 
    <fieldset> 
    <legend>Choose your favourite option:</legend> 
    <label>Susan <input type="radio" name="author" id="Susan" value="Susan"></label><br/> 
    <label>Camile <input type="radio" name="author" id="Camile" value="Camile"></label><br/> 
    <input type="submit" value="Save" /> 
    </fieldset> 
</form> 

main.js

var ele = document.getElementById("form"); 

    if(ele.addEventListener){ 
    ele.addEventListener("submit", reload, false); //Modern browsers 
    } 
    else if (ele.attachEvent){ 
    ele.attachEvent('onsubmit', reload);   //Old IE 
    } 

    function reload() { 
    window.location.reload(); 
    console.log("reloaded"); 
    drawChart(); 
    }; 

form.php

include "toJson.php"; 
$link = mysqli_connect("localhost", "root", "root", "quiz"); 

    if (!$link) { 
    die('Connect Error (' . mysqli_connect_errno() . ')' . mysqli_connect_error()); 
    } 

    $update = "INSERT INTO `quiz`.`answers` (`name`) VALUES ('" . mysqli_real_escape_string($link, $_POST['author']) . "')"; 

    mysqli_query($link, $update); 

    updateJson(); 

    mysqli_close($link); 

toJson.php

$location = $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; 
header("Location: " . $location); 

function updateJson() { 

    $link = mysqli_connect("localhost", "root", "root", "quiz"); 

    if (!$link) { 
    die('Connect Error (' . mysqli_connect_errno() . ')' . mysqli_connect_error()); 
    } 

    $result = mysqli_query($link, "SELECT * FROM `answers`"); 

    $arr = array(); 

    while($row = mysqli_fetch_array($result)) { 
    $arr[] = $row; 
    print_r($row); 
    echo "<br/>"; 
} 

//write to json file 
$fp = fopen('data.json', 'w'); 
fwrite($fp, json_encode($arr)); 
fclose($fp); 

    mysqli_close($link); 

    } 

    updateJson(); 

Answer 1

Принудительно JavaScript для перезагрузки, только в случае, если он пытается читать кэш или что-то:

window.location.reload(); 

к

window.location.reload(true); 

forcedReload булева флаг, который, когда это правда, причины страницу всегда будет перезагружена с сервера. Если он неверен или не указан, браузер может перезагрузить страницу из своего кеша.

Answer 2

Вместо того, чтобы фиксировать текущее решение, я хотел бы предложить лучшее решение. если вы используете ajax для отправки своих данных на сервер и получите ответ json назад, который вы можете использовать для отображения вашей диаграммы. вы также можете использовать плагин ajax form для применения к вашей текущей форме.