Cześć,
tworzę mały projekt, który służy mi jako nauka JavaScript i PHP. Chciałbym stworzyć nawigację, w której będą znajdowały się cztery podstrony do których użytkownik będzie się mógł przenieść bez konieczności przeładowywania całej strony. Tutaj pojawia się pewien problem, który napotkałem. Dane pobieram z pliku JSON, w założeniu będą się tam znajdować 4 kody HTML.
I o ile dane po kliknięciu w link w menu na stronie się prawidłowo wczytują, to o tyle kompletnie nie działają przyciski nawigacyjne w przeglądarce.
Zmienia się jedynie adres na pasku przeglądarki, a zawartość strony jest statyczna.
Poczytałem trochę w internecie i wywnioskowałem, że należałoby skorzystać z History API, jednak nie wiem z której strony to ugryźć. Wiele rozwiązań opiera się na jQuery, a nie chciałbym jednak sięgać po frameworki na obecnym etapie nauki. Może są inne sposoby, aby ogarnąć taką nawigację?
Kod
calculatorBMIbtn.addEventListener('click', getDataFromJsonUI);
function getDataFromJsonUI(){
fetch("link_do_json")
.then(function(response){
return response.json();
})
.then(function(result){
output = result[0].html;
userInterfaceBox.innerHTML = output;
});
}