How do I modify the URL without reloading the page?
This can now be done in Chrome, Safari, Firefox 4+, and Internet Explorer 10pp4+!
See this question's answer for more information:
Updating address bar with new URL without hash or reloading the page
Example:
function processAjaxData(response, urlPath){
document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}
You can then use window.onpopstate
to detect the back/forward button navigation:
window.onpopstate = function(e){
if(e.state){
document.getElementById("content").innerHTML = e.state.html;
document.title = e.state.pageTitle;
}
};
For a more in-depth look at manipulating browser history, see this MDN article.
How to change URL without refreshing the page?
I think you might be looking for history.pushState
history.pushState([data], [title], [URL]);
Using your example of https://featurepoints.com/
history.pushState(null, 'FeaturePoints Login', 'https://featurepoints.com/login');
Source and more details https://css-tricks.com/using-the-html5-history-api/
Change URL without refresh the page
Update
Based on Manipulating the browser history, passing the empty string as second parameter of pushState
method (aka title) should be safe against future changes to the method, so it's better to use pushState
like this:
history.pushState(null, '', '/en/step2');
You can read more about that in mentioned article
Original Answer
Use history.pushState
like this:
history.pushState(null, null, '/en/step2');
- More info (MDN article): Manipulating the browser history
- Can I use
- Maybe you should take a look @ Does Internet Explorer support pushState and replaceState?
Update 2 to answer Idan Dagan's comment:
Why not using
history.replaceState()
?
From MDN
history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one
That means if you use replaceState
, yes the url will be changed but user can not use Browser's Back button to back to prev. state(s) anymore (because replaceState
doesn't add new entry to history) and it's not recommended and provide bad UX.
Update 3 to add window.onpopstate
So, as this answer got your attention, here is additional info about manipulating the browser history, after using pushState
, you can detect the back/forward button navigation by using window.onpopstate
like this:
window.onpopstate = function(e) {
// ...
};
As the first argument of pushState
is an object, if you passed an object
instead of null
, you can access that object in onpopstate
which is very handy, here is how:
window.onpopstate = function(e) {
if(e.state) {
console.log(e.state);
}
};
Update 4 to add Reading the current state:
When your page loads, it might have a non-null state object, you can read the state of the current history entry without waiting for a popstate
event using the history.state
property like this:
console.log(history.state);
Bonus: Use following to check history.pushState
support:
if (history.pushState) {
// \o/
}
how to fully change url without reloading the page to new url?
That is not possible for a good reason. You can get more info about this here: Same-origin policy
Change URL without reload page
what you are looking for is ajaxs
to solve your problem
so lets say your current code is in content.php
content.php
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="prev">
<a href="#" aria-label="Anterior">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page_num">
<a href="#">1</a>
</li>
<li class="page_num">
<a href="#">2</a>
</li>
<li class="page_num">
<a href="#">3</a>
</li>
<li class="next">
<a href="#" aria-label="Siguiente">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<div id="result">
<!-- Load Data here -->
</div>
<script>
$( ".page_num").click(function(e) {
let page_num = $(this).text().trim();
$.ajax({
url: '/load_data.php', //location to your php file
type: 'POST',
data: {
page_num: page_num //data to send to the load_data.php file
},
success: function(data) {
$("#result").html(data);
}
});
});
</script>
load_data.php
<?php
$page_num = $_POST["page_num"];
//your php logic here
echo "MY Content";
?>
so basically anything you echo in the load_data.php file it will get output in the content.php file in the div id="result"
now this will load your content without having the page reload
Related Topics
Difference Between Client-Side and Server-side Programming
Strip HTML from Text JavaScript
How to Read CSS Rule Values With JavaScript
How to Move an Element into Another Element
Changing Source on Html5 Video Tag
Resize Html5 Canvas to Fit Window
Resize Image With JavaScript Canvas (Smoothly)
How to Show Page Loading Div Until the Page Has Finished Loading
How to Detect Keypresses in JavaScript
Using Queryselector With Ids That Are Numbers
How to Pass Variables and Data from PHP to JavaScript
How to Check Whether a Checkbox Is Checked in Jquery
How to Know Which Radio Button Is Selected Via Jquery
How to Programmatically Set the Value of a Select Box Element Using JavaScript
How to Run a Function When the Page Is Loaded
Detect All Changes to a ≪Input Type="Text"≫ (Immediately) Using Jquery
Onchange Event on Input Type=Range Is Not Triggering in Firefox While Dragging
How to Validate Inputs Dynamically Created Using Ng-Repeat, Ng-Show (Angular)