[Résolu] Loop output styling lost after view is filtered with ajax

[Auteur]

Publications

[Brent Urbanski]

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...

FILTER EDITOR:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
	[wpv-filter-search-box output="bootstrap"]
  </div>
<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>
  <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>
<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"]
</div>
[wpv-filter-spinner container="p" spinner="<em><u>hidden link</u></em>"][/wpv-filter-spinner]
[/wpv-filter-controls]
[wpv-filter-end]

LOOP OUTPUT EDITOR:

<script src="<em><u>hidden link</u></em>"></script>
[wpv-layout-start]
[wpv-items-found]
<div class="masonry-grid">
<!-- wpv-loop-start -->
<wpv-loop>
<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"]
</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]	

LOOP OUTPUT EDITOR JS Editor:

jQuery( document ).ready(function() {
runmasonry();
});

// Masonry Function //

function runmasonry() {
jQuery('.masonry-grid').masonry({
// options
itemSelector: '.grid-item'
});
}

// ******* //

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

[Christian Cox]

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:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

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?

[Brent Urbanski]

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?

[Christian Cox]

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.