How to change url after success in ajax without page reload

Question

This is the ajax

$(".urut").change(function() {
  $.ajax({
    url: "<?php echo base_url(); ?>categories/brand/<?= $link_brand; ?>?l=<?= $l; ?>&h=<?= $h; ?>&city=<?= $city; ?>&city_name=<?= $city_name; ?>&ket=view",
    type: "POST",
    data: "urut=" + $(".urut").val(),
    success: function(data) {
      $("#result").html(data);
    }
  })
})

This works, but i want the url to change because I have many parameters there and of course with the data: "urut="+$(".urut").val(), parameter as well.

if you change url it wil reload. sorry if i misunderstood your question. if i did please clarify — guradio, Jun 29 '16 at 02:48
Why would you reload a page because of needing to add more parameters to an `ajax` request? I'm not sure I understand. (Side note, did you know you can pass an object with key-value pairs?) — Assimilater, Jun 29 '16 at 02:48
`history.pushState(). history.replaceState()` https://developer.mozilla.org/en-US/docs/Web/API/History_API — ArtisticPhoenix, Jun 29 '16 at 02:49
Possible duplicate of [Modify the URL without reloading the page](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) — , Jun 29 '16 at 06:24

Sherly Febrianti · Accepted Answer · 2020-04-14T09:37:06.053

43

You can do this to your success action :

window.history.pushState("object or string", "Title", "/new-url");

See this post to Modify the URL without reloading the page for a basic how-to.

Additional Note:

The first parameter is the data we'll need if the state of the web page changes, for instance whenever someone presses the back or forwards button in their browser. Note that in Firefox this data is limited to 640k characters.

title is the second parameter which can be a string, but at the time of writing, every browser simply ignores it.

This final parameter is the URL we want to appear in the address bar.

It's now available in most "modern" browsers.

edited Apr 14 '20 at 09:37

answered Jun 29 '16 at 02:50

Sherly Febrianti

1,097
15
33

Too bad I beat you by about a minute to it :) – ArtisticPhoenix Jun 29 '16 at 02:52
it's almost finish, but i don't know how the rule to add parameters in "object or string". can you show to me? :) @sherlyfebrianti – Dimas Adi Andrea Jun 29 '16 at 03:05
@DimasAdiAndrea i've been editing the answer because the comment box cannot support any enter. :) – Sherly Febrianti Jun 29 '16 at 03:17
i've found it, btw thanks a lot, your answer really help me @sherlyfebrianti – Dimas Adi Andrea Jun 29 '16 at 03:42
@DimasAdiAndrea okayy, just upvote my answer and mark it as an answer if it really help you :) – Sherly Febrianti Jun 29 '16 at 03:43

score 6 · Answer 2 · answered Jun 29 '16 at 02:50

6

Use the browser history to change the url bar in JS.

      history.pushState()
     history.replaceState()

https://developer.mozilla.org/en-US/docs/Web/API/History_API

answered Jun 29 '16 at 02:50

ArtisticPhoenix

21,464
2
24
38

score 6 · Answer 3 · edited Jun 16 '21 at 14:32

try this

 $(".urut").change(function() {
    $.ajax({
        url: "<?php echo base_url(); ?>categories/brand/<?= $link_brand; ?>?l=<?= $l; ?>&h=<?= $h; ?>&city=<?= $city; ?>&city_name=<?= $city_name; ?>&ket=view",
        type: "POST",
        data: "urut=" + $(".urut").val(),
        success: function(data) {
            $("#result").html(data);
            window.history.pushState("Details", "Title", "<?php echo base_url(); ?>/yourNewPage");
        }
    });
});

How to change url after success in ajax without page reload

3 Answers3

Linked

Related