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

When utilizing the .replaceWith() function in jQuery, the event bindings do not stay intact

Here is a brief example. Please note that the .chat-reply class has a click event handler attached to it. The HTML (Reply Button): <div class="container"> <a href="#" class="btn small chat-reply">Reply</a> </div> When anothe ...

jqueryajaxevent-handlingreplacewith

Is it possible to integrate Wavify with React for a seamless user experience?

For my website designs, I have been experimenting with a JavaScript library known as Wavify (https://github.com/peacepostman/wavify) to incorporate wave animations. Recently delving into the world of React, I pondered whether I could integrate Wavify into ...

javascriptnode.jsreactjsgsap

What is the best way to convert an object to JSON and transmit it to a web service?

Is there a way to convert an object into json and then send it to a web service? var object = something.... function BindJson() { $.ajax({ type: "POST", url: "NewPage.aspx/GetJson", data: "{}", conte ...

c#jqueryajaxjsonserialization

How can I obtain the index of the selected class name?

Is there a way to retrieve the index of a classname assigned to multiple input fields and then log it using console.log()? I've written this code snippet: document.querySelectorAll('.class-name').forEach(item => { item.addEventListene ...

javascript

Is it achievable to animate the offset with React Native Animated?

I am attempting to develop a dynamic drag and drop functionality, inspired by this example: My goal is to modify it so that when the user initiates the touch, the object moves upwards to prevent it from being obscured by their finger. I envision this move ...

javascriptiosreactjsanimationmobile

What is the process of nesting an array of objects within an existing object, and how can additional objects be added to the array if it already exists?

I have a JSON file named questions.json containing an array of objects structured like this: { "id": "2", "ques": "here is my second code ?", "quesBrief": "I can't seem to find it too.", "hashes": "#javascript , #goodlord", "author": "slowde ...

javascriptjson

There seems to be a column in the MySQL INSERT query that is unidentifiable and does not exist in the list of fields

id and cost are required as integers and cannot be left empty. I encountered the following error message: 'Error: ER_BAD_FIELD_ERROR: Unknown column 'undefined' in 'field list'' var sql = "INSERT INTO Paintings(` ...

javascripthtmlmysqlnode.jsexpress

What is the best way to pass a mask without using a plug-in when dealing with an input value in Vue.js?

As someone who has previously implemented the function using pure JavaScript, I am now faced with the challenge of incorporating it into vue.js and determining which lifecycle hooks are best suited for this task. This issue arises as I am a beginner prepar ...

javascriptvue.jsvuetify.js

Guidelines on centering an AJAX spinning animation within a parent div

Below is the basic structure of an HTML document for a webpage. <div class="grand-parent"> <div class="header">Heading</div> <div class="parent-div"> <div class="child-div-1"></div> ...

javascriptjqueryhtmlcssajax

NodeJS loop issue with variable scoping in the context of express and mongoose

My Tech Stack: NodeJS, express, mongoose var i; for(i = 0; i < results.length; i++){ console.log("out: "+i); RegionData.findOne({'rid': results[i].region_id}, function (err, product) { if (product) { console.log("i ...

javascriptnode.jsexpressmongoose

Maintain the state of various panels on page load with the Bootstrap Accordion feature

I have implemented a Bootstrap accordion on my form page which allows users to open multiple panels simultaneously. Upon submitting the form, I want to preserve the state of any open Bootstrap accordion panels. To achieve this, I utilized code from stack ...

javascriptjqueryjsontwitter-bootstrapaccordion

Please use Shift + Enter feature only when using desktop devices

In my React chat application, I have implemented a textarea for message input to allow multiline support. This works smoothly on mobile devices as pressing Enter creates a new line and a send button is available to submit the message. However, I want a di ...

javascriptreactjsnext.jstextareaform-submit

Effortlessly include personalized order shipping details in WooCommerce with custom item meta data

Is there a way to automatically add or update meta on the order shipping method when an order is placed or when someone manually adds or edits order items? $shippingMethodItem->update_meta_data('num_packages', 0); I have tried using this code ...

phpwordpresswoocommercehook-woocommerceorders

What can be done to ensure smooth functionality of my nested navigation menu on mobile devices?

I'm utilizing the incredible features of Base Web for my website. One of the components I am using is a menu with a child menu, based on this example. The menu works perfectly fine on desktop - when I hover over an option, the child menu appears. Howe ...

javascriptreactjsmobilemobile-safaribaseweb

Monitor elements in real-time as they are inserted into the DOM using a Chrome Extension

In the process of developing a Chrome extension, I am tackling the task of removing or hiding specific elements based on their id/class. While accomplishing this after the DOM is loaded poses no issue, it does result in a noticeable "blink" on the page dur ...

javascriptgoogle-chrome-extension

Exploring the ID search feature in JavaScript

I'm facing an issue with implementing a search feature in my project. Here is the HTML snippet: HTML: <input type="text" id="search"> <video src="smth.mp4" id="firstvid"> <video src="smth2.m ...

javascripthtml

What is the best way to manage zoom settings following a completed search query?

Whenever I try to search for an address using this map, it zooms in way too much making the map unusable. Despite my efforts to adjust the map bounds, I have not been successful. It seems like I am on the right track but for some reason, it just isn't ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

The window.load() function seems to be malfunctioning as the event is not being triggered. There are no error

I'm struggling with getting the window.load() event to trigger on this specific website. The issue arose last night and despite there being no visible js or php errors, pinpointing the root cause has proven to be quite challenging. In syrp.home.main ...

javascriptjqueryhtml

The day text function failed to return a value and instead gave back

I am having trouble figuring out where the mistake is in my function below. My goal is to retrieve the day value in string format. function getDayText(date){ var weekday = new Array(7); weekday[0]= "Sunday"; weekday[1] = "Monda ...

javascriptjquery

Text values slider bar

Currently in the process of designing a permissions screen that would greatly benefit from the inclusion of a slider bar. The goal is to make it easy for users to set permissions for different sections of the site. By utilizing a horizontal slider bar with ...

asp.netajaxslider