Leveraging window.hash and the power of WordPress htaccess

I have a Wordpress website where I am using Ajax to display posts in a specific section. I am currently having Javascript add the hash tag like this:

window.location.hash = id;

Everything is working as expected. For instance, it changes the URL to www.mydomain.com/shop/#147. However, if someone visits this link directly, I'd like WordPress to load the corresponding page instead - such as www.mydomain.com/?p=147, which would then convert to something like www.mydomain.com/product/blue-hat with my permalinks structure. This part is what's causing me trouble. Should I use a WordPress rewrite rule for this situation? Or should I make modifications to the htaccess file?

I would appreciate any guidance on how to address this issue. Thank you.

javascriptajaxwordpress.htaccessmod-rewrite

Answer №1

It's not possible to send URL fragments to the server, hence redirecting based on them isn't an option.

If there is a strong need to direct users to ?p=147, you can achieve this through JavaScript by detecting the presence of a hash when the page initially loads. Consider using this code snippet:

if(window.location.hash) {
    // Hash fragment is present
    window.location = "http://your-url-here.com/?p=" + window.location.hash.substring(1);
} else {
    // No hash fragment found
}

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

fetching numerous JSON documents using jquery

I am struggling to retrieve data from multiple JSON files and display it in a table. Despite being successful in appending data from one JSON file, I encountered issues when trying to pull data from multiple files. Here is my code: var uri = 'sharepo ...

javascriptjqueryjson

Error: Attempting to access a property of an undefined object resulting in TypeError (reading 'passport')

I am currently working on a project that requires me to display user profiles from a database using expressjs and mongoDB. However, I have encountered an issue and would appreciate any solutions offered here. Here is the code from my server: const express ...

javascriptnode.jsexpressmongooseejs

Tips for transferring parameters between functions in AngularJS

I'm currently working with the following piece of code: var FACEBOOK = 'facebook'; $scope.handle_credentials = function (network) { hello(network).api('me').then(function (json) { dbService.handle_credential ...

javascriptangularjsparameters

Exploring 2D arrays in AngularJS - A comprehensive guide

I have the following array declared in my JavaScript file var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.name = 'Superhero'; $scope.tempArr = [ ["block A1", "block B1", "block C1"], ["block ...

javascriptarraysangularjs

"Are you in search of an open source sketchpad with flash or ajax

Looking to add a drawing component to a charity website for users to create simple sketches. The component should: Allow users to draw in black on a white canvas. Save the full drawing process to the server. Save the final image to the server. Replay th ...

ajaxapache-flexflashopen-sourcedrawing

What is the best way to implement dynamic comment display similar to Stack Overflow using Asp.net and Jquery?

I have created a small web application using Asp.net and C#. Currently, I am able to retrieve comments by refreshing the entire page. However, I would like to achieve this functionality without having to do a full refresh. For instance Let's say the ...

javascriptjqueryasp.net.netangularjs

What steps can be taken to resolve the issue of "Access Denied: Invalid token, incorrect code"?

Assigned to me recently for a school project is a coding challenge that consists of various parts. The final task involves uploading to a private GitHub repository and submitting a completion request through a POST request under specific conditions. I hav ...

javascriptnode.jsjsonrfctotp

When transferring Next Js static assets to Plesk, a 500 internal server error is encountered

I've successfully deployed a Next.js app to Plesk hosting after a lot of troubleshooting. However, I'm encountering 500 internal server errors in the console when trying to access the static assets. Here's an example: GET https://nextjs-test ...

javascriptnode.jsnext.jsweb-hostingplesk

React developer server is failing to automatically refresh the code

I've encountered an issue with react-dev-server where changes I make to the code do not reflect on the app itself even after refreshing (not hot-loading). I've tried setting up my own project as well as using Facebook's Create-react-app, whi ...

javascriptnode.jsreactjsreact-routercreate-react-app

How can I update the chartjs instance?

I am currently working on creating a reactive graph that updates based on certain values. However, I am running into issues where my computed ChartData() function is not updating the component as expected. I have tried using the update() function, but I am ...

javascriptvue.jschart.js

Looking to design a unique PHP page for a WordPress website without a theme directory

I'm still learning about WordPress, so please bear with me if I ask any simple questions. Currently, I have a WordPress website built using a page builder without utilizing theme templates from the theme folder. Additionally, I have another project th ...

phpwordpress

"When trying to access a jQuery ID, it is coming back as undefined even though the

I'm attempting to obtain the ID of a specific element, save it as a variable, and then utilize that ID value to interact with other elements in the same section bearing the identical ID. <div class="mainContent"> <div class="articleContent"& ...

javascriptjqueryhtml

Tips for passing a distinct identifier to the following page when transitioning with Link in NextJS

I need to pass an identifier to the next page when a user navigates. On my homepage, I am fetching an array of data and using the map method to display it in a card-based UI. When a user clicks on a card, they should be taken to another page that display ...

javascriptreactjsnext.jsnext-routernext-link

Experiencing complications with an Angular 2 router

When a user logs into the system, they are greeted with a navigation bar featuring options like Dashboard, Customers, and Product. Below is an excerpt from my routes file: app.routing.ts export const router: Routes = [ { path: '', redir ...

javascriptangularroutesnavbarrouter

Exploring the dynamic duo of Github and vue.js

As I am new to programming and currently learning JavaScript and Vue.js, I have been trying to deploy my first Vue.js app without success. Despite spending hours on it, I still cannot figure it out and need to seek assistance. Every time I try to deploy, ...

javascriptvue.jsgithubdeploymentbuild

Retrieve data from ajax call in segments before it finishes

When my browser sends an ajax/json request to the server, it calls several services to gather data of different lengths before displaying it in the browser. Instead of waiting for all the data to be retrieved at once, I would prefer to receive the data (j ...

javascriptajax

Contrasting the lib and es directories

I am seeking clarity on my understanding. I am currently working with a npm package called reactstrap, which is located in the node_modules folder. Within this package, there are 4 folders: dist es lib src I understand that the src folder contains the s ...

javascriptnode.jsnpm

The Mean stack application is throwing an error message: "user.comparePassword is not

This section contains my user models in the file named "user.js". var mongoose = require('mongoose'); var bcrypt = require('bcryptjs'); let emailLengthChecker = (email) => { if (!email) { return false; } else { if (emai ...

javascriptnode.jsmongodb

Replicate the functionality of a mouse scrolling event

I have incorporated Jack Moore's Wheelzoom jQuery plugin to zoom and drag an SVG image on my website. However, I also want to include manual zoom in and out buttons for the users. I am considering two options to achieve this - triggering a mouse whe ...

javascriptjquerysvgjquery-events

Issue found: Passing a non-string value to the `ts.resolveTypeReferenceDirective` function

Encountering the following error: Module build failed (from ./node_modules/ts-loader/index.js): Error: Debug Failure. False expression: Non-string value passed to ts.resolveTypeReferenceDirective, likely by a wrapping package working with an outdated res ...

javascriptreactjstypescriptwebpack