Dear Support
We have noticed some strange behaviour with our search functionality recently.
When we click either Find a Job or Find a Native Nanny in the menu as a logged in user to perform a search, everything is displayed correctly as expected.
However, when clicking on a search option to filter the results, the results are filtered correctly, however the layout is getting screwed up for the first item returned in the list. The second and following items return as normal. In the German version, the layout got completely squished to the left.
See screenshots.
The two Toolset Views in question are:
- Find a Native Nanny Search and Results View
- Find a Job Search and Results View
Thanks and best regards
Simon
Hi
Quick update: I cannot edit my post any longer here on the support, but it is only happening for "Find a Native Nanny " (Find a Native Nanny Search and Results View) not for Find a Job (Find a Job Search and Results View).
Thanks and best regards
Simon
Hi Simon,
Thank you for contacting us and I'd be happy to assist.
While I can see the issue with the first item in the view's results on the AJAX search (on both pages), I couldn't reproduce this on my test website.
Do I have your permission to download a clone/snapshot of your website, to investigate this on a different server?
regards,
Waqar
Hi Waqar
Hope you are well. 😉
Of course you may, please just disable WordFence on the clone. If you need any logins for the different roles, please let me know in a private reply.
Thanks and best regards
Simon
Thank you for the permission and I've downloaded the duplicator package.
I'll be doing some troubleshooting and will share my findings as soon as I can.
Thank you for waiting.
During troubleshooting, I noticed that some of the styles from the Avada theme were conflicting with the column styles used in the fusion builder in the view output.
To overcome this, I included this custom script in both views, "Find a Job Search and Results View" and "Find a Native Nanny Search and Results View":
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
jQuery('.js-wpv-view-layout .row .col-md-12 .fullwidth-box .fusion-builder-row > .fusion-builder-column-0').addClass('fusion-builder-column-2').removeClass('fusion-builder-column-0');
});
As a result, you'll see the first result item correctly on the "Find a Native Nanny" and "Find a Job" pages.
Hi Waqar
Thanks for your insights. While the situation has improved, it is not quite yet what it was before. 😉 When there's only one result, the mini ads are still not being displayed correctly. For example on Find a Job. if you click English, the one Nanny Ad "Englische Nanny gesucht 3" is found. If you look at the layout it seems squished up to the left. If you view the Ad among the others its layout is correct.
Kind regards
Simon
The challenge here is that the column styles from the fusion builder for the content outside the view are interfering the with the columns used inside the view.
To overcome this, you can use the Bootstrap column classes for the two columns used in the view's output.
1. In the content template "Loop item in Find a Job Search and Results View", I added the class "col-md-4" to the left column and the class "col-md-8" to the right column, using the CSS Class field.
2. Next, in the view "Find a Job Search and Results View", I updated the custom script from the last message to:
jQuery( document ).on( 'ready js_event_wpv_parametric_search_results_updated', function( event, data ) {
jQuery('.js-wpv-view-layout .row .col-md-12 .fullwidth-box .fusion-builder-row > .fusion_builder_column').removeClass (function (index, css) { return (css.match (/(^|\s)fusion-builder-column-\S+/g) || []).join(' '); });
});
This script removes the fusion builder's column classes from the view's content template output, so that the column layout is controlled by the Bootstrap column classes only.
You can see these changes in action on the "Find a Job" page, where the view's column layout stays consistent, no matter how many results are shown.
Hi Waqar
On Find a Job, now the results are all squished up to the top. Also on the German version of the page, when we click for example on "Teilzeit Native Nanny" (part time Native Nanny in English), then click it again to show all results, the whole layout squeezes up into the first 3rd of the page. The behaviour in English is different.
It seems like we are adding more complication by adding JavaScripts etc to compensate for changes which may have occurred either in Toolset plugins or the Avada theme over time. Indeed, when I programmed originally over a year ago, we had to use this text-based version, because of bugs with the Toolset plugins regarding sorting of results etc. Those problems perhaps no longer exist in today's versions of the plugins. But I can't confirm that without reprogramming it all.
Taking a step back, is it time to rethink this a little? Is there a better way to achieve this? For example, using Toolset Blocks instead of the Fusion Builder for layout? Or would that complicate things further?
On the one hand, it's frustrating that something that worked great in the past breaks. But I appreciate that software evolves and sometimes it is better to rethink things rather than introducing more mini-fixes which deviate from the standard softwares and could break again in the future. I try to avoid introducing JavaScript where at all possible, but appreciate also that it is necessary sometimes to achieve the desired result.
I look forward to hearing your advice on this.
Thanks and regards
Simon
I agree and your concerns about using the custom script workarounds make sense.
No matter how well the compatibility cooperation exists between any two software, there is always a chance of conflicts in the long run. The whole idea behind the introduction of Toolset Blocks was to minimize the need for a third-party page builder, while staying within the new default Gutenberg editor from WordPress.
If you have the time to invest in the remake of the view's content template using the Blocks editor instead of the Fusion Builder, I'll recommend that as it will give you more stable and consistent results.
To get started you can deploy the website's clone on a different location and start the remaking on that clone to get a better idea of what will be involved.
If that sounds like too much work, another option is to show the content in the sidebar and the view's results in the same column in the Fusion Builder environment but then use the Bootstrap column classes to show them in the desired columns. This way you won't have to include the custom script from my last message. The objective is only to avoid the use of Fusion builder columns inside the view's template.
Hi Waqar
We agree it's definitely worth giving Toolset Blocks a shot and I'm trying to build a parallel View which I can use using Toolset Blocks, following the Toolset tutorial here:
https://toolset.com/lesson-placement/lesson-placements-1621261-1622283/
However I am hitting the same error mentioned in other posts on the forum, where "processing server request, please wait" appears every 1-2 seconds infinitely and tries to update the content, thereby making it impossible to edit the View.
1) https://toolset.com/forums/topic/content-template-editor-processing-server-request-please-wait/
2) https://toolset.com/forums/topic/view-bug-and-processing-server-request-please-wait-infinite/
3) https://toolset.com/forums/topic/new-view-processing-server-request-please-wait/
All I have done so far is:
- created a new page "find-job" using the Gutenberg Editor
- added a Toolset Header Block to display the Title as a URL. So far so good. It is pulling in the all titles of the Nanny Ads as a URL.
- added a Toolset Image Block, I choose Current Nanny Ad as the dynamic source, then I get that pesky message every 1-2 secongs in the bottom left of the screen which prevents the Image settings from appearing in the sidebar.
The other 3 posts don't really explain how the resolve the appearance of that message. Furthermore, when I choose Current Nanny Ad as my Post Source, I would expect to be able to choose Field Group for Nanny Ads, where the image I want is stored (see screenshot). (analog to the Custom fields for Gyms in the tutorial)
I checked the Post Type Settings (see screenshot) for Nanny Ads. Does this need to be set to "Block" in order for this to work? And if I changed it to "Block", would my current "classic" Views stop working? Or can this be set to "Per Post"?
Or some other setting or something which can be adjusted to fix this?
Thanks and kind regards
Simon
Hi Waqar
I feel that Toolset Blocks cannot compete with the flexibility and power of Toolset Classic Views in terms of functionality.
1 - It doesn't seem easily possible to separate the search filters on the left and the results on the right as we have in our search pages on our site already
2 - I cannot add the Taxonomy Views as search filters, I only see blue lines when I try to add them in a Toolset View Block. If I click any of the blue lines (in the hope that it's just a display problem), the block just displays "Error while retrieving the View preview. The selected View (ID: undefined) was not found."
3 - Can't use the images from our custom fields in the Toolset Image block
4 - Can't get the map address field to display nicely as a search box.
5 - Can't get any search filters to appear on the previewed page. All I see are sorting controls and the Headings, which so far are the only things that have worked successfully.
The tutorial videos make it all look easy, but in reality the Blocks interface (not just from Toolset) is fiddly, unintuitive and very clunky to use unfortunately.
In terms of usability, I have been using Toolset for over a year now and can't even manage to do one search page successfully after 6 hours of playing around with Toolset Blocks. I can imagine that if I can't even get a simple search page up in 6 hours that I am in for a lot of redevelopment work if we try to rebuild the search based on Toolset Blocks.
To this end, I would like to get our original Find a Job and Find a Native Nanny search pages back to a working state again, and request that we re-focus our efforts on getting those working again with as few workarounds as possible.
Thanks and kind regards
Simon
HI Waqar
I reprogrammed the Find a Job Search and Results View Content Template by hand written code and it works great now and is so much leaner than before with all extra Fusion code. The issue with the squishing after showing one result doesn't appear now either.
My only remaining question now is what JavaScript code have you added and where, that is no longer needed and can be removed now?
Thanks and best regards
Simon
Thanks for the update and the new structure of the view looks simpler and efficient.
1. In the view "Find a Native Nanny Search and Results View" you'll find this script in the JS editor under the search and pagination:
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
jQuery('.js-wpv-view-layout .row .col-md-12 .fullwidth-box .fusion-builder-row > .fusion-builder-column-0').addClass('fusion-builder-column-2').removeClass('fusion-builder-column-0');
});
2. In the view "Find a Job Search and Results View", you'll find this script in the JS editor under the search and pagination:
jQuery( document ).on( 'ready js_event_wpv_parametric_search_results_updated', function( event, data ) {
jQuery('.js-wpv-view-layout .row .col-md-12 .fullwidth-box .fusion-builder-row > .fusion_builder_column').removeClass (function (index, css) { return (css.match (/(^|\s)fusion-builder-column-\S+/g) || []).join(' '); });
});
Both these are no longer needed and can be removed.
Hi Waqar
Thanks again for your help on this ticket.
My issue is resolved now. Thank you!
