Skip Navigation

[Resolved] Loop output styling lost after view is filtered with ajax

This support ticket is created 5 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 3 replies, has 2 voices.

Last updated by Christian Cox 5 years ago.

Assigned support staff: Christian Cox.

AfterFilter copy.jpg
BeforeFilter copy.jpg

I am trying to: Filter posts with ajax filtered view

Link to a page where the issue can be seen: Local development

I expected to see: Filtered results with css styling applied

Instead, I got: filtered results without css styling applied

Blow is the code used in my view...


[wpv-filter-start hide="false"]
<div class="form-group">
	[wpv-filter-search-box output="bootstrap"]
<div class="form-group">
	<label>[wpml-string context="wpv-views"]Fields[/wpml-string]</label>[wpv-control-post-taxonomy taxonomy="business-field" type="select" format="%%NAME%% | %%COUNT%%" url_param="wpv-business-field"]
  <div class="form-group">
	<label>[wpml-string context="wpv-views"]Staff Size[/wpml-string]</label>[wpv-control-postmeta field="wpcf-staff-size" url_param="wpv-wpcf-staff-size"]
<div class="form-group">
	<label>[wpml-string context="wpv-views"]Freelancer[/wpml-string]</label>[wpv-control-postmeta field="wpcf-freelancer" url_param="wpv-wpcf-freelancer"]
[wpv-filter-spinner container="p" spinner="<em><u>hidden link</u></em>"][/wpv-filter-spinner]


<script src="<em><u>hidden link</u></em>"></script>
<div class="masonry-grid">
<!-- wpv-loop-start -->
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 grid-item">
[wpv-post-body view_template="Loop item in Directory Search with Beaver Builder and Masonry"]
<!-- wpv-loop-end -->
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>


jQuery( document ).ready(function() {

// Masonry Function //

function runmasonry() {
// options
itemSelector: '.grid-item'

// ******* //

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {

Hi, I'll try to help. First, adding a script tag in your Loop Output Editor is not supported and prone to problems. You should instead enqueue that script in your theme using WordPress's wp_enqueue_script function:

Next, it's difficult for me to tell what's happening here based on the markup and images. Can you tell me if you take the masonry javascript out of the picture, is the result what you expect? In other words, can we eliminate everything in the Loop Output JS editor, and achieve the desired styles?

If not, then I'll need to see this in a browser to investigate what's happening. It could be a CSS targeting issue, or an HTML structure issue, that can be modified somehow in the Content Template. I'll need to use the inspector to determine this - is your dev site online somewhere?


Hi Christian,

I've removed the script from the loop output editor, and have also confirmed that the styling is lost after filtering, even when the masonry javascript has been removed.

Unfortunately, I do not have a way to share my dev site, as I'm working locally.

Are you aware of any common solutions to this issue?


You can try these troubleshooting steps:
- Temporarily activate a default theme like Twenty Seventeen. Deactivate any plugins except Toolset Types and Views. Retest.
- If the problem is resolved, reactivate your theme and plugins one by one until the conflict is revealed.

These steps may not be very helpful since you're using Beaver Builder to design your Content Templates, if I understand your code samples correctly. If you can't share an online dev site, you could use the Duplicator plugin to create a clone, then share that clone with me over Dropbox or Drive. I can download the clone package and install it locally so we can troubleshoot the problem together.