Modify URL parameters using history.pushState()

Question

Modify URL parameters using history.pushState()

Utilizing history.pushState, I am adding several parameters to the current page URL after performing an AJAX request. Now, based on user interaction on the same page, I need to update the URL once again with either the same set of parameters or additional ones. My code snippet looks like this:

var pageUrl = window.location.href + "?" + queryString;
window.history.pushState('','',pageUrl);

The 'queryString' variable holds my list of query parameters.

For instance, the initial page URL is:
After the first AJAX call on the same page, the URL should be:
Following a second AJAX call on the same page, the URL could look like:

However, using the above code results in the parameters being added to the URL alongside existing ones, leading to duplication as shown below after the second AJAX call:

Is there a way to replace the parameters in the URL before pushing it to the History object, or is there a better approach to achieving this functionality in JavaScript (using jQuery)?

javascript jquery ajax url

Answer 1

Answer №1

It is my understanding that the solution entails eliminating window.location.href and retaining '?' +.

var currentUrl = '?' + queryDetails;
window.history.pushState('', '', currentUrl);

Answer 2

It is my understanding that the solution entails eliminating window.location.href and retaining '?' +.

var currentUrl = '?' + queryDetails;
window.history.pushState('', '', currentUrl);

Answer 3

Answer №2

Use this function for updating URL parameters:

function updateUrlParameter(param, value) {
    const regExp = new RegExp(param + "(.+?)(&|$)", "g");
    const newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
    window.history.pushState("", "", newUrl);
}

Note: A simpler solution is presented below. It works even if the parameter is not currently in the URL. Please be aware that it's not compatible with Internet Explorer.

function setQueryStringParameter(name, value) {
    const params = new URLSearchParams(window.location.search);
    params.set(name, value);
    window.history.replaceState({}, "", decodeURIComponent(`${window.location.pathname}?${params}`));
}

Answer 4

Use this function for updating URL parameters:

function updateUrlParameter(param, value) {
    const regExp = new RegExp(param + "(.+?)(&|$)", "g");
    const newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
    window.history.pushState("", "", newUrl);
}

Note: A simpler solution is presented below. It works even if the parameter is not currently in the URL. Please be aware that it's not compatible with Internet Explorer.

function setQueryStringParameter(name, value) {
    const params = new URLSearchParams(window.location.search);
    params.set(name, value);
    window.history.replaceState({}, "", decodeURIComponent(`${window.location.pathname}?${params}`));
}

Answer 5

Answer №3

If you want to manipulate the parameters of a URL while keeping the last part intact, you can achieve this by creating a new URL object:

// For example, let's take the URL: sample.com/testpage/test

var url = new URL(window.location);
url.searchParams.set('foo', 'bar');
window.history.pushState({}, '', url);

// The result will be: sample.com/testpage/test?foo=bar

// If you wish to remove only the parameter, you can do so like this:
url.searchParams.delete('foo');

Answer 6

If you want to manipulate the parameters of a URL while keeping the last part intact, you can achieve this by creating a new URL object:

// For example, let's take the URL: sample.com/testpage/test

var url = new URL(window.location);
url.searchParams.set('foo', 'bar');
window.history.pushState({}, '', url);

// The result will be: sample.com/testpage/test?foo=bar

// If you wish to remove only the parameter, you can do so like this:
url.searchParams.delete('foo');

Answer 7

Answer №4

Updating query parameters within the URL

This specific approach differs from other solutions by avoiding the use of regular expressions and string concatenations.

Parameters:

paramName - specifies the name of the query parameter as a string.
paramValue - represents the value associated with the parameter as a string.
addNew - a boolean flag that determines whether to always add a new parameter or update an existing one. When set to true, it ensures multiple parameters with the same name can be included in the query.

function modifyQueryString(paramName, paramValue, addNew=false) {
    const currentURL = new URL(window.document.URL);
    if (addNew) currentURL.searchParams.append(paramName, paramValue);
    else currentURL.searchParams.set(paramName, paramValue);
    window.history.replaceState(null, "", currentURL.toString());
}

Answer 8

Updating query parameters within the URL

This specific approach differs from other solutions by avoiding the use of regular expressions and string concatenations.

Parameters:

paramName - specifies the name of the query parameter as a string.
paramValue - represents the value associated with the parameter as a string.
addNew - a boolean flag that determines whether to always add a new parameter or update an existing one. When set to true, it ensures multiple parameters with the same name can be included in the query.

function modifyQueryString(paramName, paramValue, addNew=false) {
    const currentURL = new URL(window.document.URL);
    if (addNew) currentURL.searchParams.append(paramName, paramValue);
    else currentURL.searchParams.set(paramName, paramValue);
    window.history.replaceState(null, "", currentURL.toString());
}

Answer 9

Answer №5

const baseURL =
      location.protocol +
      "//" +
      location.host +
      location.pathname;
    console.log("baseURL : " + baseURL);
    history.pushState(undefined, undefined, baseURL + "?" + parameters);

Answer 10

const baseURL =
      location.protocol +
      "//" +
      location.host +
      location.pathname;
    console.log("baseURL : " + baseURL);
    history.pushState(undefined, undefined, baseURL + "?" + parameters);

Answer 11

Answer №6

To easily update my route, I found that by adding window.location.search at the end works like a charm:

If we have defined strings for user.id and post.id:

window.history.replaceState(
  null,
  "",
  `/users/${user.id}/${post.id}${window.location.search}`,
);

Referencing the definition of window.location.search

It retrieves the query portion of the URL in the Location object (including the leading "?" if not empty). It can also be modified to go to the same URL with an altered query (ignoring the leading "?").

Answer 12

To easily update my route, I found that by adding window.location.search at the end works like a charm:

If we have defined strings for user.id and post.id:

window.history.replaceState(
  null,
  "",
  `/users/${user.id}/${post.id}${window.location.search}`,
);

Referencing the definition of window.location.search

It retrieves the query portion of the URL in the Location object (including the leading "?" if not empty). It can also be modified to go to the same URL with an altered query (ignoring the leading "?").

Modify URL parameters using history.pushState()

Answer №1

Answer №2

Answer №3

Answer №4

Updating query parameters within the URL

Answer №5

Answer №6

Similar questions

Can you explain the contrast between uploading files with FileReader versus FormData?

Modifying button text with jQuery is not feasible

Passing component properties using spaces in VueJS is a simple and effective

How to manage form submissions in Vue.js using inputs within child components

How to use jQuery to update a text input field based on a selected <select> dropdown option

Executing JavaScript code within ASP.NET Visual Basic

New Relic identifies mysterious delays caused by MongoDB's findOne method

"415 (Unsupported Media Type) encountered when making a POST request in a REST API

Creating a file structure for JavaScript files in a Vue CLI project

Inquiry regarding modules in Javascript/Typescript: export/import and declarations of functions/objects

I could use some assistance with iterating through an array that is passed as a parameter to a function

What is the method for including the sources directory within the require() scope in npm?

Requesting the user to repeatedly input their birth year until it is less than the current year

Validating Inputs with an Array of Values in my Angular 2 Application

Troubleshooting React and NodeJs Fetch Problem

A guide on setting up ExpressJS Error Handling to display custom error messages based on the corresponding HTTP Status codes

Changing the Material UI imported Icon on click - a step-by-step guide

What could be causing my webpage to automatically refresh following a POST request in NodeJS?

You can install the precise version of a package as mentioned in package.json using npm

Incorporating a JavaScript npm module within a TypeScript webpack application