That this is custom code there isn't much that I can do in the way of assisting however seeing that the code works on the AJAX pagination i'm assuming that you're already using the callback function for the AJAX pagination.
If such is the case then you will also need to use the callback function for the AJAX search as well. Here is that callback function below.
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/
});
I found jQuery code for persisting checkboxes through page reloads that seems to work. I've modified it to attach listeners to the checkboxes on the item cards. It seems to work but not through pagination. I have currently set the view for AJAX pagination.
Ultimately, I'll need to collect the list of checked cards and handle that on the next page.
I think I'm close, but I just haven't figured out why the checkbox persistence isn't consistent. Sometimes it works on the first page. Sometimes it works going forward, but not going back through pages.
Is there a better way to keep track of checked boxes across paged search results?
The jQuery code I used creates a new instance of PersistentCheckboxes when the page first loads. I',m not sure if I need to create a new instance for each time the results paginate, or if I need to call the first instance created. For that matter, there is also an init() function that might do it. None of those seem to make it work right if I enter them as the callback function in the pagination settings.
Given that you're using local storage here, you will need to retrieve the local storage value for the instance of the item that was selected and perform a check to see if that item is being displayed on the page and then write some code to re-check back the checkboxes.
So essentially each time your view paginates the code will run that was added to the pagination callback function.
Please let me know if this advice helps.
Thanks,
Shane
Do you have examples of this? I am trying to provide a checkbox for each item in the paginated search results. I want users to be able to select multiple items on each page of results, but I can't figure out how to keep the state of checkboxes as results are paged.
This must be simpler than I realize, but I just don't know how to hook up my javascript.
I have created a separate view at the bottom of the page hidden link
That view just stores a data property for each item. When a box is checked, I set the corresponding element's data-inquote to true. I'm trying to set the checkbox state by iterating over the current page of results and setting the state of each checkbox according to what's in that bottom view.
Do I need to do all of this? Ultimately, I'll need to submit the set of checked results to the next page.
I should probably mention that I am using that second view as a way to store the states of the checkboxes without using LocalStorage. Is localStorage better?
I just re-built my JavaScript using the jQuery persistent checkboxes plugin, but added callbacks for the page updated event and the search updated event and now it appears to be functioning.
Now I just need to figure out how to collect all of those selected items across the pages results and ship that array to the next page. Any suggestions?
As mentioned previously you can use your browser's sessionstorage and then retrieve it on another page. hidden link
Session storage would be a better alternative for your case given that you only want the data for this particular instance. So utilizing the session should provide you with a way to store the values of the selected options temporarily and then retrieve them after you've paginated.
I should probably mention that I am using that second view as a way to store the states of the checkboxes without using LocalStorage. Is localStorage better?
I'm not sure how you're using a second view to store values, can you perhaps explain this ?
I make a second view that lists the same result set as the first view, but without pagination; just an empty <div id='[post-id]'></div> for each found item. I put that view into a hidden div and then use JavaScript to sync the state of each unique checkbox to a 'checked' or 'unchecked' class I then write to each of the elements.
I know it's hacky as hell, but it acts like local storage and I can manipulate it with JavaScript & jQuery. Even rats like me eventually find the cheese in the maze.
This is functioning exactly like how a local storage works so you can make use of the browser's storage rather than storing the items on the page itself.
However using session storage would be better given that you only want to limit the storage to the users current browser window. Even if the user opens a new tab the session storage value won't persist onto that tab as well.
So you can essentially store the ID of the post as well as its state in some form of array.
