Issue with changing the URL in the Ajax call

Question

I have a rest service call for the pagination concept. Now In the pagination concept on clicking on the next button/icon I am able to call the rest service and it is returning the required values but the URL is not changing, I need to change the page number in the URL. My code is next icon event is as follows,'

function nextPage(currentPage, totalPageCount) {
            alert(currentPage+ " Begin nextPage Method " + totalPageCount);
            var nextPage = currentPage+1;
            var ctx = "${context}";
            var url = ctx+"/adtrack/storelist/National/1/"+nextPage;
            console.log(url);
            if(nextPage  <= totalPageCount)
                {
                jQuery.ajax({
                   url: url,
                   type: "GET",
                   success: function(msg) {
                    alert("Success");
                   },
                   error : function(msg) {
                     alert("Fail");
                   }
                  });
                }
            else{
                alert("Unable to perform the action!!!");
            }
            // return true or false, depending on whether you want to allow the `href` property to follow through or not
        }

In the above call it is hitting the URL and returning the values but I also need to change the current URL to latest URL. How can I update the URL?

What ever the URL I am hitting that URL has to be updated as the browser current URL

Answer 1

Hi my suggestion is try to declare the nextPage variable as a Global variable because whenever you hit that function the new value will be assigned to that nextPage variable.so try that also

     var nextPage=0;

function nextPage(currentPage, totalPageCount) {
      /......../

      nextPage= currentPage+1;

     /......../

}

Answer 2

You should probably use History API, it allows mainpulating browser history.

function nextPage(currentPage, totalPageCount) {
            alert(currentPage+ " Begin nextPage Method " + totalPageCount);
            var nextPage = currentPage+1;
            var ctx = "${context}";
            var url = ctx+"/adtrack/storelist/National/1/"+nextPage;
            console.log(url);
            if(nextPage  <= totalPageCount)
                {
                jQuery.ajax({
                   url: url,
                   type: "GET",
                   success: function(msg) {
                    alert("Success");
                    /* History API goes below, replace /testurl with the string you want */
                    window.history.pushState(null, null, '/testurl');
                   },
                   error : function(msg) {
                     alert("Fail");
                   }
                  });
                }
            else{
                alert("Unable to perform the action!!!");
            }
            // return true or false, depending on whether you want to allow the `href` property to follow through or not
        }

Just keep in mind some older browsers might not support it

http://caniuse.com/#feat=history

More info on History API here

https://css-tricks.com/using-the-html5-history-api/

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

Answer 3

The following code will preserve the page from refreshing and just changes the url.

 history.pushState({id: '<SOME-ID>'}, '', 'newUrl');

For more info, refer https://rosspenman.com/pushstate-jquery/