With that knowledge (and the below snippet of my code that modifies the url), could someone direct me on how to get the url rewritten properly in the event the user loads into a page above (such as through refreshing their browser) and continues to scroll through posts? if they reload into …/somewhere/page/4 then when they continue to scroll it should continue on as …/somewhere/page/5 etc.
My JavaScript knowledge is still… a work in progress.
The problem is here: domainUrl+'page/'+pageNumber, if the user opens at a specific page, then the domainUrl will already contains page/4 and you’re adding page/+pageNumber again.
You can check if domainUrl contains the page and if so change just the page number instead of adding page/+pageNumber again.
The domainUrl variable is assigned to location.href. I am adding the page + page number because it doesn’t exist in the url. Being that I’m using Wordpress, is there a more efficient way I should be pulling the URL as the page is scrolled and pushing it to the address bar? One of the things I did try to do was just add ‘page’ directly to the domainUrl variable when I declare it and then only add the page number through the pushState, but page/page-number was still getting appended to the url.
So if the user goes directly to a paged page, the domainUrl will be set to domain.com/somewhere/page/pageNumber because the variable is initially being set to location.href. So with that it makes sense why, when the user scrolls and more posts are loaded, that the address bar gets appended with another /page/pageNumber. But that’s what I need to prevent from happening. I need just the number at the end of the domainUrl string to get updated.
Exactly. Should be easy now, you check if there’s already a page/something in the url, if not you keep doing what you’re doing, but if there is you remove that part of domainUrl and add the correct page.
Sorry for sounding so elementary. This whole task has been a challenge, I’m amazed I got as far as I have with my knowledge lol
Where would that check be done? I did that before, and it would remove ‘page’ from the url as posts are loaded since it’s currently inside an AJAX call and would have ‘page’ in the url next time posts are loaded. So essentially, once the page is scrolled and posts gets loaded, ‘page’ will always be in the url. And ‘page’ would already be in the url if the user loaded up one of the paged pages (ie, domain.com/somewhere/page/3).
Using the following code, I am getting the url desired on the first scroll (domain.com/somewhere/page/2) but any load after that the url remains unchanged. The current_url in history.pushState uses the wordpress codex (in a php file) to get the url of the next page. Unfortunately, when I wrapped history.pushState(null, null, infinite_scroll_params.current_url) it alerts as undefined every time more posts are loaded. Is there a step I’m missing to get the history.pushState to freshly trigger with each loading of posts?
I think since you’re getting the current_url from php you’re using the url you got when you loaded the page and not the url that is in the address bar at that particular moment. But I’m not sure, because I’m not too familiar with wordpress.
It looks like pushState doesn’t require the domain url, just what you want to insert, so you don’t need to use the current_url unless you also want to preserve what was in the url.
pushState doesn’t return anything, there’s no point in alerting it, it will always be undefined.
Please note the / before the page, this will make sure the browser replaces everything after the domain url with your string. If you remove it, then the browser will append that string into the current url.
Thank you so much for your help, ghukahr. It appears the issue has been resolved. I took what you suggested and modified it a bit. Turns out I also needed to essentially do a string replace on the url to get it to act as needed. Working great now.