The functionality of the back button in a JavaScript website only allows users to navigate through their browsing

I'm currently experiencing an issue with the back navigation button on my one-page website. When I load a new page, I use the following code snippet:

displayPage = function (page, json) {
        var stateObj = { "page": page, 'json': json };
        history.pushState(stateObj, "", page);
        // some code here

and then when the back button is triggered:

$(function() {
    Skeleton._construct();
    window.onpopstate = function(event) {
        Skeleton.dispPage(event.state);
    }
});

this.dispPage = function(blob){
        displayPage(blob.page, blob.json);
}

However, after clicking the back button once, the onpopstate event is triggered and I successfully go back to the previous page. But if I click the back button again, or multiple times, the onpopstate event is no longer triggered. Can anyone advise me on what I should do in this situation?

Thank you in advance for your help.

javascriptjson

Answer №1

After investigating the issue independently, I identified the root cause.

Upon calling the displayPage function, I neglected to check the source of the reloads, resulting in a repeated execution of pushState and interfering with the navigation history. To resolve this, I made the following adjustments:

this.dispPage = function(blob){
        //added a parameter here
        displayPage(blob.page, blob.json, 1);
}

displayPage = function (page, json, external = 0) {
        var stateObj = { "page": page, 'json': json };
        // checked the 'external' parameter here
        if(external == 0){
          history.pushState(stateObj, "", page);
        }
        // implemented some code here
}

Sharing this solution in hopes that it may assist others facing similar challenges.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to retrieve PHP object using AJAX

I am having trouble fetching the PHP file from Ajax. In the PHP file, an object is created and then converted into JSON using the json_encode() function. However, when I try to request that PHP file from Ajax, nothing is displayed as output ('Smith&ap ...

phpjsonajax

Trouble encountered while attempting to choose a single checkbox from within a v-for loop in Vue.js?

<div id="example-1"> <ul> <input type="text" v-model="searchString" placeholder="Filter" /> <p>sortKey = {{sortKey}}</p> <li v-for="item in sortedItems"> <input class="checkbox-align" type="checkbo ...

javascriptvue.js

The Vue.js transition feature seems to be malfunctioning when trying to display a modal

I can't figure out why my animation isn't working with Vue transitions. Here is the code I have: <template> <teleport to="body"> <div class="modal-overlay" v-if="loading"> <transitio ...

javascriptvue.js

What is the best method for me to filter the values in my array?

I need to add a value to an array based on certain conditions. My code looks something like this: var newEmployee = []; $scope.employees = [{'id':1, 'new':true},{'id':2, 'new':false}{'id':3, 'new&apo ...

javascriptarraysangularjs

I am looking to sort users based on their chosen names

I have a task where I need to filter users from a list based on the name selected from another field called Select Name. The data associated with the selected name should display only the users related to that data in a field called username. Currently, wh ...

javascriptreactjs

Update Material-ui to include an inclusive Datepicker widget

I have integrated the Material-ui Datepicker into my website to allow users to download timed event information from a database. The issue I am facing is that when users select two bracketing dates, events for the end date are not showing up correctly. F ...

javascriptdatepickermaterial-ui

Clear session data when logging out from a dropdown list

I have a header that appears on several of my web pages. It contains a dropdown menu that allows users to log out by selecting the "Logout" option. When a user clicks on "Logout", I want to destroy the session variables associated with their session. Is t ...

javascriptphpjquerysession

An error occurred during runtime due to a TypeError when trying to execute the 'setItem' function on 'Storage'. The error message indicates that 2 arguments are required for this function, but only 1 argument

Having an issue with the local storage not working and the screen showing up as white in the browser. 5 | const getFromLocalStorage = () => { 6 | if (typeof window !== undefined) { > 7 | const value = localStorage.getItem(& ...

javascriptreactjsnode.jsnext.js

Using Python Webdriver to Execute JavaScript File and Passing Arguments to Functions

How can I execute a JavaScript function and pass arguments to it? value = driver.execute_script(open("path/file.js").read()) I have successfully executed the file, but I am unsure of how to pass arguments to the function within it. Any suggestions would ...

javascriptpythonselenium-webdriver

Setting the color of an element using CSS based on another element's style

I currently have several html elements embedded within my webpage, such as: <section id="top-bar"> <!-- html content --> </section> <section id="header"> <!-- html content --> </section> <div id="left"> &l ...

javascriptjqueryhtmlcssjoomla3.0

Retrieve the smallest value from an array of objects using BitGO

Bitgo stores all transactions as objects within a large array. Within the nested .entries, we can identify that the first TX object contains two negative values -312084680 and -4254539, of which I only require the lowest value. My current code successfully ...

javascriptnode.jsif-statementforeachmin

When working on a MEAN web application, encountering HTTP responses like 403 or 500 from the Express server can sometimes go unnoticed and not be properly handled in the errorCallback function within

Within my Node web app, there is a situation where an HTTP GET request is sent in one of the Angular controllers. At the same route defined in Express, somewhere in the route logic, an HTTP 500 response (also tried 403 Error) is also being sent. However, i ...

javascriptangularjsnode.jsexpress

Tips for implementing validation in AngularJS

Could someone help me with AngularJS validation? I'm new to it and trying to make sure everything is correct. var app=angular.module('myApp',[]) app.controller('myController',function($scope){ $scope.clickMe = function(){ if($(& ...

javascriptjqueryangularjs

Open a webpage and execute JavaScript with just one click of a bookmark

I found a convenient bookmark that opens my Google Calendar page at http://www.google.com/calendar/renderOnline. Additionally, I have another bookmarklet that applies specific JavaScript to the page: javascript:document.getElementById('gadgetcell&apo ...

javascriptbookmarklet

Refreshing the Angular resource under observation

My brain feels a bit fried today, so pardon what might seem like an obvious question. I have a useful resource at my disposal: Book = $resource("/books/:id", {id: "@id"}); book = Book.get(1); When I want to refresh the object to receive any updates from ...

javascriptangularjsangular-resource

Using double quotes in the argument within the Visual Studio Code launch.json runtimeArgs configuration

I am currently using Visual Studio Code with the 'Debugger for Chrome' extension to debug JavaScript code. However, I am facing a challenge as I need to run an out-of-process pepper plugin while debugging. Typically, outside of Visual Studio Cod ...

jsonvisual-studio-code

Unlocking the Power of Localization: An Easy Guide to Accessing JavaScript Values

After utilizing the localization helper created by Matt Hawley, I found it to be incredibly effective. However, I am encountering an issue when attempting to retrieve the values in javascript/jQuery. For example, I am unable to fetch the resource text usi ...

javascriptjqueryasp.net-mvclocalization

What is the proper way to send a HTTP status code 409 (conflict) and a JSON response from a spring REST API when a duplicate email is detected while a user is registering

I have attempted a few solutions so far, including: Using the Response object, but I prefer to avoid utilizing the servlet API of JSP. Trying a solution that returns an HTML response with a status code, however, I need it to be JSON instead. Here is a ...

jsonspringrestmodel-view-controllerconflict

Error encountered: Invalid date time conversion exception occurred while attempting to convert JSON to an object using REST.Json

An error is encountered when attempting to parse the JSON code into an object. The issue appears to be related to the presence of a decimal in the date and time value, specifically '2019.10.5 14:16:14,1000' which triggers an exception. '20 ...

jsonrestdelphidelphi-10.2-tokyo

JavaScript: Filtering list by elements that contain a certain value

I have the following collection of objects: [ { employeeId:1 employeeName:"ABC" }, { employeeId:2 employeeName:"ABD" }, { employeeId:3 employeeName:"FEW" }, { employeeId:4 employeeName:"JKABL" },] I am looki ...

javascriptjqueryreactjs