Question

20

How to dynamically change URL without reloading?

rated 0 times [ 27] [ 7] / answers: 1 / hits: 91269 / 12 Years ago, mon, august 13, 2012, 12:00:00

OK, this what I'm trying to do (I think Google mostly does this as well) :

Scenario A :

In page /Main_Page let's say there are 3 sections. When user clicks on section A link, section A's content is loaded through AJAX and embedded into the page.

Scenario B :

When /Main_Page/Section_A is loaded, we practically go to the very same page (as in scenario A) - /Main_Page and load Section A via AJAX - as before.

The problem :

We've got 2 identical resulting pages, but the URL is different (in the first case it'll be just /Main_Page, while in the second it will be /Main_Page/Section_A).

What I want to do :

In Scenario A, after loading Section A via AJAX, how should I do it so that the appearing URL (in the browser address bar) is /Main_Page/Section_A (or anything else for that matter), without any sort of redirecting, page reloading, etc?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sabrina

Add To Favorites

Follow

Total Points: 92

Total Questions: 92

Total Answers: 85

Location: Palestine

Member since Thu, Feb 2, 2023

1 Year ago

sabrina questions

1 Error: Failed to initialize react-native-reanimated library

Sat, Sep 24, 22, 00:00, 2 Years ago

1 reset/clear selected values in select-option on button click in React.js?

Sat, Jul 3, 21, 00:00, 3 Years ago

1 Type only refers to a type, but is being used as a value here when exporting

Sat, Jul 11, 20, 00:00, 4 Years ago

1 JSRuntime.InvokeVoidAsync in Blazor Server app calling multiple functions when I only tell it to call one

Sun, Apr 19, 20, 00:00, 4 Years ago

1 How do I return 'null' if the array is empty rather than undefined using the .find method with arrow functions?

Tue, May 7, 19, 00:00, 5 Years ago

View All

answered 12 Years ago aubreeg · Accepted Answer

Your problem can be solved by implementing the History API, especially by using the pushState() method. I recommend reading about it in MDN. There's also an all-in-one solution called History.js, it will help you implement it x-browser easily (It will fallback to URL hashes # if the browser doesn't support it).

Here's an example:

history.pushState('', 'New Page Title', newHREF);

Not excited enough? Here's a demo that will encourage you to implement it.