`Back and forward function of pushState in history`

After successfully implementing ajax loading on all pages of my website, I encountered a challenge with the browser's back and forward buttons. Implementing the back button was straightforward:

$(window).on('popstate', function(e) {
    get_page_content(location.href);
});

The get_page_content() function is responsible for retrieving and replacing page content when a link is clicked. Inside this function, I utilize pushstate like so:

window.history.pushState('', '', url);

However, the issue arises when attempting to use the forward button after going back. How can I enable functionality for the forward button as well?

javascriptajaxwordpressbrowser-historypushstate

Answer №1

After some troubleshooting, I discovered that the issue was caused by placing 

window.history.pushState('', '', url);
within the get_page_content() function. This resulted in the pushState being called every time the onpopstate event was triggered, leading to a dead end with no forward navigation possible. To resolve this, I simply moved the pushState outside of the get_page_content() function and now everything is functioning properly. Here's the revised code snippet:

$('body').on('click', 'a:not([href^="#"])', function(e) {

  if ( this.host === window.location.host ) {

    e.preventDefault()

    get_page_content($(this).attr('href'));
    window.history.pushState('', '', url);

  }

});

$(window).on('popstate', function(e) {

    get_page_content(location.href);

});

function get_page_content(url) {
  // ...
}

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

Delay the execution of @mouseover in Vue: a guide to managing scope

Looking to implement an action only when the user has hovered over a div for at least 1 second. Here's how it's set up: <div @mouseover="trigger"></div> In the script section: data() { return { hovered: false } } m ...

javascriptscopevue.jsdelaymouseover

Tips for waiting on image loading in canvas

My challenge involves interacting with the image loaded on a canvas. However, I am uncertain about how to handle waiting for the image to load before starting interactions with it in canvas tests. Using driver.sleep() is not a reliable solution. Here is ...

javascriptangularjshtmlcanvasselenium-webdriver

Picture cannot reemerge with SetTimeout

Browsing Experience: Users will simply tap on an image (group of spots) to make it disappear from the screen. Upon clicking the image, it will smoothly fade out. However, if the user does not interact with the image, a new one won't show up after 10 ...

javascriptjquerysettimeoutsetinterval

It seems that JQtouch has a limitation when it comes to sending identical requests more than once

I am currently developing a mobile app using JQ Mobile. The app contains a list of items, and when you select one, it sends you to another page where an Ajax request is made. However, I've encountered a problem where if I go back, select a different i ...

ajaxjqtouch

What is the best way to include additional text in a dropdown menu?

I'm trying to add the text "Choose Country" in a drop-down list before the user selects their country. example1 Here is the line of code I used: <option data-hidden="true"> Choose Country </option> However, the phrase does ...

javascripthtmlangularbootstrap-5

Combining various postponed JavaScript file imports in the HTML header into a single group

I've been facing an issue with my code structure, particularly with the duplication of header script imports in multiple places. Every time I need to add a new script, I find myself manually inserting <script type="text/javascript" src=&q ...

javascripthtmljquery

Generating dynamic anchor tags in Vue.JS

I have a JavaScript object that I want to convert into HTML elements and display it in Vue.js. So far, my approach has been to convert the object into strings representing HTML elements and then add them to the template. However, even though this method di ...

javascripthtmlvue.jsvuejs2

Transferring information among components and incorporating the ngDoCheck function

We are currently working on transferring data from one component to another using the following method. If there is no data available, we display an error message; however, if there is data present, we populate it in a select box. showGlobalError = true; ...

javascriptangulartypescriptangular7

Automating the process of posting a file to a form with javascript

I have a piece of client-side JavaScript that creates a jpeg file through HTML5 canvas manipulation when the user clicks an "OK" button. My goal is to automatically insert this jpeg output into the "Upload Front Side" field in a form, simulating a user up ...

javascripthtml

Unable to successfully delete all channels in discord.js

I'm currently working on a bot designed to delete all channels within a Discord server. Here is the code I have written: const { Client, GatewayIntentBits } = require("discord.js"); const client = new Client({ intents: [ GatewayIntent ...

javascriptnode.jsdiscorddiscord.js

Guide to generating an array entry for every line of a text file in node.js

Struggling with converting each line of a text file into an array entry in node.js The array I am working with is named "temp." The code below successfully prints out each line: var temp = []; const readline = require('readline'); const fs = re ...

javascriptnode.jstext

Generate dynamic routes in Next.js only when needed

I'm currently working on a project using NextJS to create a frontend for a database that contains thousands of products, with the expectation of significant growth. The site/products/ route is functioning well, but I wanted to add a route to view indi ...

javascriptreactjsnext.js

Problems Arise Due to HTA File Cache

My JavaScript function fetches the value of a label element first, which serves as an ID for a database entry. These IDs are then sent to an ASP page to retrieve the save location of images from the database. The save location information for each selecte ...

javascriptajaxinternet-explorercachinghta

Leveraging the power of React in conjunction with an HTML template

After purchasing an HTML template from theme forest, I am now looking to incorporate React into it. While I find implementing Angular easy, I would like to expand my skills and learn how to use React with this template. Can anyone provide guidance on how ...

javascripthtmlcssreactjsfrontend

Ways to verify the user's authentication status on the server end

Before displaying an HTML page, I need to verify user authentication. Here is a snippet from my server.js: const express = require('express'); var jquery = require('jquery'); var admin = require("firebase"); const app = expre ...

javascripthtmlexpressfirebase-authentication

Dealing with AngularJS: Issue arises when attempting to inject $modal into a controller nested within a directive

Our team has implemented a custom directive that wraps around a checkbox and utilizes transclusion to inject content into it. Here is an example of the setup: somecheckbox.js angular.module('namespace.directives') .directive('someCheckbox& ...

javascriptangularjstwitter-bootstrapcheckbox

When implementing auto-generated IDs in HTML forms, rely on randomly generated values for increased uniqueness

When developing a form with multiple complex controls built as Backbone views, one wants to ensure that the labels are correctly linked to the input elements. This is typically done using the "for" attribute. However, in cases where the same control needs ...

javascriptjqueryhtmlbackbone.js

Troubleshooting problems with Chart.js scaling upon page load

Using chart.js to display a horizontal bar graph. Interestingly, upon the initial loading of the website, only a fraction of one bar is visible, and the graph fails to properly adjust to the display size until the window is manually resized. This issue per ...

javascripthtmlchart.js

Modifying an image's height and width attributes with jQuery and CSS on click action

I'm currently developing a basic gallery using HTML, CSS, and jQuery. The objective is to have a larger version of an image display in a frame with an overlay when the user clicks on it. While this works flawlessly for horizontally-oriented images, ve ...

javascriptjquerycssoverlay

Stream JSON data to a file with Node.js streams

After reading this article, I decided to utilize the fs.createWriteStream method in my script to write JSON data to a file. My approach involves processing the data in chunks of around 50 items. To achieve this, I start by initializing the stream at the be ...

javascriptnode.jsjsonstreamnode-streams