[Resolved] All Items on Map on Initial Load & Refresh with Paginated Grid Items

[Author]

Posts

[aaronS-5]

Nigel, just a quick note after some more debugging...

It seems like with the visible & hidden filters with two different views when one loads and the other view doesn't, there's a "display: none" coming up on the page for one of the views. If I debug in Google inspector and uncheck "display: none" then the grid item is there or the map is there.

Is there a way to override this setting so that the view comes up?

It's clearly the JS, as I removed the div classes from the filter output on both views to test and each filter is working without those classes which the JS is targeting.

Thanks!

[Nigel]

Hi Aaron

I've just spent quite a while working on the first issue and am still struggling with a solution.

I was able to see some problems on my local site updating the master grid search and the slave map search not always updating as expected.

Long story short is that there is quite a bit of JS code from the Views plugin that runs when you update a field that triggers an ajax update, and that triggering the second View to update before the first has finished appears to interfere and means that it doesn't behave as expected and the solution is not simple.

I'm going to check with my colleagues to see if they can spot anything I'm missing. I just wanted to let you know I'm still working on it, but I'm going to look at the second issue next.

[aaronS-5]

Sounds good, thanks a lot Nigel, much appreciated!

[Nigel]

Hi Aaron

I'm still waiting for feedback from the developers about the maps issue.

I have an online demo that sort of works, except it can break after a few changes to the colour filter (hidden link).

It seems there is a limitation whereby updating the second View (triggered by JS) while still updating the first View means they interfere with each other, so the solution I was working on involves waiting for the first View update to complete before triggering the update of the second View (the JS becomes more complex). So there is some lag before the map updates (which I think is unavoidable), but after a few iterations it seems to break in any case, and I'm waiting to see if the developer can improve on the solution.

Regarding the Divi ajax styling issue, I managed to reproduce a problem whereby the styles applied to the View results are not consistently applied to all results after an ajax update.

It rang some bells and so I searched within our internal issues system and found a related ticket, which concludes with the solution to disable ajax and use page reloads to resolve the problem.

It arises because of how Divi adds iterative class names to each of the View results that are output using a template designed with Divi.

So instead of each set of results having the same classnames, they have classnames such as...

.et_pb_section_0
  .et_pb_row_0
    .et_pb_text_0

.et_pb_section_1
  .et_pb_row_1
    .et_pb_text_1

.et_pb_section_2
  .et_pb_row_2
    .et_pb_text_2

To continue using ajax you would need to not apply styles directly to the modules when using the Divi editor (to set padding, for example), and instead add a classname to the module and then add custom CSS which targets that classname.

The ticket remains open, but it doesn't look like something we are in a position to fix.

[aaronS-5]

Thanks Nigel, definitely interested to see if there's a way to make sure it doesn't break on certain filters using ajax.

In terms of the divi / ajax styling issue...I think the best way to make sure the issue doesn't happen is using custom html / css for the loop as you mentioned and not using any divi builder styles within the modules. I am recreating with custom css and will follow up to make sure there aren't any other issues.

Thanks again for your help, and I'll await you getting feedback from the developers to see if there's a way to pair ajax with the full map using JS without having any issues.

Thanks!

[Nigel]

Hi Aaron

I didn't get anything helpful from the developers, I'm afraid, and I think we may have to abandon this approach if updating via ajax is a must.

Which possibly makes sense anyway.

You have a map showing markers for all posts and a list of posts, the list being paginated.

This requires two queries, because different numbers of posts are being returned for each.

But this isn't very performant, running almost duplicate queries.

If you are going to display markers for all the posts then I think the solution is to use just one View with custom filters to output both the map and the list of posts. Changing filters or search terms updates the results via ajax and affects both the map and the list of posts.

But you don't want to display a list of 400 posts, even if you do want the map to include 400 markers.

So a solution is to load all of the results but then use a JavaScript-based pagination library to display the posts as a paginated list.

All of the posts will be in the browser already, and the library will handle which 'page' of posts get shown at any given moment.

(That contrasts with server-based pagination where the server only sends, say, 10 posts to the browser at a time.)

I don't have any recommendations for which library to try, the only thing you need to plan for is that the code to paginate the list of posts will need instantiating on document ready, but also whenever the search results have been updated (using the js_event_wpv_parametric_search_results_updated event).

I think this is likely your best option.

[aaronS-5]

Thanks Nigel, I appreciate you going the extra mile to see if there was any way around it.

For the JavaScript-based pagination library, will that be feasible for loading times since it will be loading over 400 posts in the grid still at once? Wasn't sure if it required every single grid item to load before the initial wordpress archive/page populates.

In terms of a specific library, is this something along the lines I should would look to implement? hidden link

I'm guessing this would have to be a custom js setup and not something that could be integrated with a plugin.

Wasn't sure if there are any docs / points of reference for any other users who have implemented a JavaScript-based pagination library with toolset.

Thanks!

[Nigel]

I took a look at that link but I couldn't understand their documentation I'm afraid, and I don't have an example of a library to use, it is not something that Toolset users would normally require because of the built-in pagination.

Regarding the loading times the thing is that you already have a query to add 400 markers to the page. It depends on what your list of results will look like: if each result contains an image then you might want to combine this with a lazy-loading technique so that images are only loaded when needed.

I'm sorry I don't have a working example to give you.

It would certainly make a sensible feature to request: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

[aaronS-5]

Thanks Nigel, I will definitely put through as a feature request as I'm sure there are users who would like to use ajax filtering with showing all items on the map with a limited grid on the same page. For the setup that I'm doing, there are lot of sites developed this way with ajax refresh (full map of all items) and a limited paginated grid.

It looks like my best options with toolset are having no live filtering with two different views (map view with all items & grid view with pagination) or having one main view with ajax filtering and only having the map populate whats shown on the grid. Or splitting the results into 2 pages, a single map page view with ajax filtering & a single grid view with ajax filtering.

Not sure going down the road of having all items load on the grid (400+ images with text) and JS library pagination customization would be the fastest in terms of loading, even with lazy loading on the images.

Appreciate your help!

[Nigel]

Hi Aaron

I have this sitting in my queue but I don't have much to add, I exhausted what I consider the available options with Toolset as-is.

Let me know if you have any success.