Checking if a URL contains a value with javascript

Question

I am working on a feature for my site that allows the user to use the back button and not have to load more database results.

I start by loading 16 results, and then there is a load more button which loads the next 16. In the ajax success i change the href of this button so the url changes to eg domain.com/#1 to #2.

I wrote this last night:

// First get the page URL and split it via # signs
var parts = location.href.split('#');

// now we run a check on the URL and see how many 'parts' there are
if(parts.length > 1)
{
  var params = parts[0].split('?');
  var mark = '?';
  if(params.length > 1)
  {
    mark = '&';
  }
  location.href = parts[0] + mark + 'page=' + parts[1];
}

Which gets the URL, and redirects the user the same page but converts the fragment number to a page number. From this i then use a PHP $_GET and set the limit claus last value from that.

This works fine. But its primitive. Let for instance say i push back and the URL becomes:

www.domain.com/?page=1

If i then click to load some more data, the page url becomes:

www.domain.com/?page=1#2

If the user then visits another page and comes back then they get directed to:

www.domain.com/?page=1&page=1

Whats the best way around this? I was thinking of running a check on the URL at the same time as looking for a fragment and if the URL has a page variable i then add that variable to the fragment variable and the page URL becomes ?page=THE SUM NUMBER

Any help on modifying the snippet i posted above to check the URL for a page value and then add the two together before the redirection?

Thanks!

Answer 1

You need to use location.search to get the query string on a URL:

var queryParameters = location.search.split('&');

Then you can loop through the queryParameters and check if page is set:

var pageNumber = 0;
for(var i = 0; i < queryParameters.length; i++)
{
    var keyvaluePair = queryParameters[i].split('=');
    if(keyvaluePair[0] == 'page')
    {
        pageNumber = keyvaluePair[1];
        break;
    }
}

Please see the documentation on the MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Window.location
You might also find this example useful for returning one value:
https://developer.mozilla.org/en-US/docs/Web/API/Window.location#Example_.236.3A_Get_the_value_of_a_single_window.location.search_key.3A

If you want to get the information after the # , you need to use location.hash . The MDN documentation I linked also has information on location.hash .