Use hash values for AJAX pagination instead of query params

Prevents conflicts with WordPress server-side pagination handling.
URLs now use #page=2 format instead of ?paged=2.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hanson.xyz Dev
2025-12-16 00:07:20 -06:00
parent 1862cef42a
commit b7eb0de882
2 changed files with 39 additions and 23 deletions
File diff suppressed because one or more lines are too long
@@ -467,23 +467,21 @@
self.filterProperties(page); self.filterProperties(page);
}); });
// Handle browser back/forward // Handle browser back/forward via hash change
$(window).on('popstate', function(e) { $(window).on('hashchange', function() {
if (e.originalEvent.state && e.originalEvent.state.propertyFilters) { var page = self.getPageFromHash();
self.setFormFromState(e.originalEvent.state.propertyFilters); self.filterProperties(page, false);
self.filterProperties(e.originalEvent.state.page || 1, false);
}
}); });
}, },
/** /**
* Initialize filters from URL params * Initialize filters from URL (hash for page)
*/ */
initFromUrl: function() { initFromUrl: function() {
var params = new URLSearchParams(window.location.search); var params = new URLSearchParams(window.location.search);
var hasFilters = false; var hasFilters = false;
// Set form values from URL // Set form values from URL query params (filters only, not page)
this.$form.find('select').each(function() { this.$form.find('select').each(function() {
var name = $(this).attr('name'); var name = $(this).attr('name');
if (params.has(name)) { if (params.has(name)) {
@@ -492,14 +490,24 @@
} }
}); });
// Save initial state // Check for page in hash
if (hasFilters) { var page = this.getPageFromHash();
var state = this.getFormState();
state.page = parseInt(params.get('paged')) || 1; // If we have a page > 1 in hash, load that page
history.replaceState({ propertyFilters: state, page: state.page }, '', window.location.href); if (page > 1) {
this.filterProperties(page, false);
} }
}, },
/**
* Get page number from URL hash
*/
getPageFromHash: function() {
var hash = window.location.hash;
var match = hash.match(/#page=(\d+)/);
return match ? parseInt(match[1]) : 1;
},
/** /**
* Filter properties via AJAX * Filter properties via AJAX
*/ */
@@ -605,33 +613,41 @@
}, },
/** /**
* Update browser URL * Update browser URL (filters in query, page in hash)
*/ */
updateUrl: function(formData, page) { updateUrl: function(formData, page) {
var url = new URL(homeprozAjax.archiveUrl); var url = new URL(homeprozAjax.archiveUrl);
// Add non-empty filters to URL // Add non-empty filters to URL query params
for (var key in formData) { for (var key in formData) {
if (formData[key]) { if (formData[key]) {
url.searchParams.set(key, formData[key]); url.searchParams.set(key, formData[key]);
} }
} }
// Add page if > 1 // Add page to hash if > 1
if (page > 1) { if (page > 1) {
url.searchParams.set('paged', page); url.hash = 'page=' + page;
} else {
url.hash = '';
} }
var state = { propertyFilters: formData, page: page }; // Use replaceState to avoid adding history entries for every page
history.pushState(state, '', url.toString()); history.replaceState(null, '', url.toString());
}, },
/** /**
* Get page number from pagination URL * Get page number from pagination link URL
*/ */
getPageFromUrl: function(url) { getPageFromUrl: function(url) {
var match = url.match(/[?&]paged=(\d+)/); // Check hash first
return match ? parseInt(match[1]) : 1; var hashMatch = url.match(/#page=(\d+)/);
if (hashMatch) {
return parseInt(hashMatch[1]);
}
// Fallback to query param for server-rendered links
var queryMatch = url.match(/[?&]paged=(\d+)/);
return queryMatch ? parseInt(queryMatch[1]) : 1;
}, },
/** /**