How to change the page URL with a button

Question

I am trying to do a next/previous button on my calendar to show the next/previous month.

Ideally, the best thing would be not to refresh the page, but in the first place I don't mind having to refresh the page.

I have got a calendar($m,$y) function in php that let me change the value of my calendar directly in the url. For exemple (it's an image) : http://localhost/VELO/index1.php?mois=3&year=2019

So basically, in this exemple, I would like my previous button to change the url to ".../index1.php?mois=2&year=2019"

I tried the following code (and many others) from one of the most answered question about this subject but it didn't worked :

<script>
function getQueryVariable(variable) {
     var query = url.substring(1);
     var vars = query.split('&');
     for (var i=0; i<vars.length; i++) {
          var pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
     }

     return false;
  }

var url = 'http://localhost/VELO/index1.php?mois=3&year=2019'

var mois = getQueryVariable(url, 'mois');
var year = getQueryVariable(url, 'year');

var params = { 'mois':2, 'year':2019};
var new_url = 'http://localhost/VELO/index1.php?' + jQuery.param(params);

// With this in my <body> : 
// <button type="button" class="precedent"><a href="new_url">Prev</a></button>

</script>

But I am getting the following error :

The requested URL /VELO/new_url was not found on this server

In summary, what I am asking is :

Is the code I am using not appliable in this case ?
Is there an other way to change my url with a button ? (can I use $_GET['month'] ?)
Is it possible to do this without refreshing the page ?

There are some similar questios with the solution: [Updating address bar with new URL without hash or reloading the page](https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page), [How do I modify the URL without reloading the page?](https://stackoverflow.com/questions/824349/how-do-i-modify-the-url-without-reloading-the-page). — lerichard_v, Jul 30 '19 at 16:11

score 0 · Answer 1 · answered Jul 30 '19 at 16:11

0

Have your JavaScript listen to an onclick event binded to a button. If you don't want to refresh page you can call that link using ajax. I would recommend using JQuery to help you accomplish this.

answered Jul 30 '19 at 16:11

jazzmasterkc

379
6
17

Thank you, I posted my answer to the question ! – 7bmax Aug 04 '19 at 16:36

score 0 · Accepted Answer · answered Aug 04 '19 at 16:31

I found an answer to my question !

At first, I tried the solution degreerichi sent me but it wasn't working really well. Here is the first code that is NOT WORKING :

<script> // NOT WORKING
$(function() {

    $('.precedent').click(function(e){
    e.preventDefault();
    var targetUrl = "http://localhost/VELO/index1.php?mois=6";        
    window.history.pushState(null, null, targetUrl);
    setCurrentPage(targetUrl);
    }); 

});
</script>

My problem here (if anyone still want to solve/explain it) is that the url is changing but my calendar is not changing. For instance, when I click on my previous button I have this in my localhost (image). You can see that the url changed but the calendar isn't the one for June (mois=6).

So here is how I solved the problem :

<script> // WORKING
$(function() {

    $('.precedent').click(function(e){
    e.preventDefault();
    var targetUrl = "http://localhost/VELO/index1.php?mois=6";       
    window.location = targetUrl;
    }); 

});
</script>

In this case my calendar is updating as follow this image.

Don't hard code the URL. At least try to get the hostname then append the path. — Sathishkumar Rakkiyasamy, Aug 04 '19 at 16:37
Yes, I am not going to let my URL like that but I am going to make an other function to catch the current year/month variable ID and then add +1 or -1 so my prev/next button work like they are supposed to. — 7bmax, Aug 04 '19 at 16:41

How to change the page URL with a button

2 Answers2