[Resolved] Masonry Grid

[Author]

Posts

[Brent Urbanski]

I was able to get Masonry working with the code provided in the url below. However, if using Ajax powered search, my css formatting is lost after filter is applied to results.
https://toolset.com/forums/topic/masonry-grid/

As tobiasS suggested, I tried adding this to the loop output JS area, but doesn't help.
-------
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
runmasonry();
});
-------

Can you help provide a solution?

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - Could you please try to add the JS callback custom code within view's filter section's JS box instead of view's loop output JS box. Does it makes any difference?

Additionally - Could you please share following information:
1)
Could you please send me debug information that will help us to investigate your issue.
=> https://toolset.com/faq/provide-debug-information-faster-support/

2)
Could you please share problem URL?

[Brent Urbanski]

Hi Minesh,

I've tried to adding this JS to the view's filter section JS box, but it didn't fix the issue.

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

Is this above code correct? Should I replace any part of the code with naming from my view or leave it as-is?

Unfortunately, I cannot share a url as I'm working locally.

Here is the debugging info you requested:

{"core":{"Wordpress":{"Multisite":"No","SiteURL":"http:\/\/www.portlandcreativelist.dev","HomeURL":"http:\/\/www.portlandcreativelist.dev","Version":"4.8.2","PermalinkStructure":"\/%postname%\/","PostTypes":"post, page, attachment, revision, nav_menu_item, custom_css, customize_changeset, wp-types-group, wp-types-user-group, wp-types-term-group, cred-form, cred-user-form, scheduled-action, acf-field-group, acf-field, product, product_variation, shop_order, shop_order_refund, shop_coupon, shop_webhook, shop_subscription, fl-builder-template, view, view-template, fl-theme-layout, directory-listing, dir-portfolio-image, slides","PostSatus":"publish, future, draft, pending, private, trash, auto-draft, inherit, in-progress, failed, acf-disabled, wc-active, wc-switched, wc-expired, wc-pending-cancel, wc-pending, wc-processing, wc-on-hold, wc-completed, wc-cancelled, wc-refunded, wc-failed"},"Server":{"jQueryVersion":"1.12.4","PHPVersion":"5.5.24","MySQLVersion":"5.6.24","ServerSoftware":"Apache\/2.4.12 (Unix) OpenSSL\/1.0.1m PHP\/5.5.24 mod_perl\/2.0.8-dev Perl\/v5.16.3"},"PHP":{"MemoryLimit":"512M","UploadMax":"512M","PostMax":"512M","TimeLimit":"600","MaxInputVars":"5000"}},"plugins":{"active_plugins":{"query-monitor\/query-monitor.php":{"GitHub URI":"","Woo":"","Name":"Query Monitor","PluginURI":"https:\/\/github.com\/johnbillion\/query-monitor","Version":"2.15.0","Author":"John Blackbourn","AuthorURI":"https:\/\/johnblackbourn.com\/","TextDomain":"query-monitor","DomainPath":"\/languages\/","Network":false,"Title":"Query Monitor","AuthorName":"John Blackbourn"},"advanced-custom-fields-pro\/acf.php":{"GitHub URI":"","Woo":"","Name":"Advanced Custom Fields PRO","PluginURI":"https:\/\/www.advancedcustomfields.com\/","Version":"5.6.2","Author":"Elliot Condon","AuthorURI":"http:\/\/www.elliotcondon.com\/","TextDomain":"acf","DomainPath":"\/lang","Network":false,"Title":"Advanced Custom Fields PRO","AuthorName":"Elliot Condon"},"bb-plugin\/fl-builder.php":{"GitHub URI":"","Woo":"","Name":"Beaver Builder Plugin (Pro Version)","PluginURI":"https:\/\/www.wpbeaverbuilder.com\/?utm_medium=bb\u0026utm_source=plugins-admin-page\u0026utm_campaign=plugins-admin-uri","Version":"1.10.8.3","Author":"The Beaver Builder Team","AuthorURI":"https:\/\/www.wpbeaverbuilder.com\/?utm_medium=bb\u0026utm_source=plugins-admin-page\u0026utm_campaign=plugins-admin-author","TextDomain":"fl-builder","DomainPath":"","Network":false,"Title":"Beaver Builder Plugin (Pro Version)","AuthorName":"The Beaver Builder Team"},"bb-theme-builder\/bb-theme-builder.php":{"GitHub URI":"","Woo":"","Name":"Beaver Themer","PluginURI":"https:\/\/www.wpbeaverbuilder.com\/?utm_medium=bb-theme-builder\u0026utm_source=plugins-admin-page\u0026utm_campaign=plugins-admin-uri","Version":"1.0.2.1","Author":"The Beaver Builder Team","AuthorURI":"https:\/\/www.wpbeaverbuilder.com\/?utm_medium=bb-theme-builder\u0026utm_source=plugins-admin-page\u0026utm_campaign=plugins-admin-author","TextDomain":"fl-theme-builder","DomainPath":"","Network":false,"Title":"Beaver Themer","AuthorName":"The Beaver Builder Team"},"bb-ultimate-addon\/bb-ultimate-addon.php":{"GitHub URI":"","Woo":"","Name":"Ultimate Addon for Beaver Builder","PluginURI":"http:\/\/www.ultimatebeaver.com\/","Version":"1.6.1","Author":"Brainstorm Force","AuthorURI":"http:\/\/www.brainstormforce.com","TextDomain":"uabb","DomainPath":"","Network":false,"Title":"Ultimate Addon for Beaver Builder","AuthorName":"Brainstorm Force"},"bbpowerpack\/bb-powerpack.php":{"GitHub URI":"","Woo":"","Name":"PowerPack for Beaver Builder","PluginURI":"https:\/\/wpbeaveraddons.com","Version":"1.4.0.1","Author":"Team IdeaBox - Beaver Addons","AuthorURI":"https:\/\/wpbeaveraddons.com","TextDomain":"bb-powerpack","DomainPath":"\/languages","Network":false,"Title":"PowerPack for Beaver Builder","AuthorName":"Team IdeaBox - Beaver Addons"},"cb-custom-modules\/cb-custom-module.php":{"GitHub URI":"","Woo":"","Name":"CB Custom Beaver Builder Modules","PluginURI":"https:\/\/www.cbcustommodules.com","Version":"1.5","Author":"Crafty Beavers","AuthorURI":"https:\/\/www.cbcustommodules.com","TextDomain":"cb-custom-modules","DomainPath":"","Network":false,"Title":"CB Custom Beaver Builder Modules","AuthorName":"Crafty Beavers"},"codepress-admin-columns\/codepress-admin-columns.php":{"GitHub URI":"","Woo":"","Name":"Admin Columns","PluginURI":"https:\/\/www.admincolumns.com","Version":"3.0.3","Author":"AdminColumns.com","AuthorURI":"https:\/\/www.admincolumns.com","TextDomain":"codepress-admin-columns","DomainPath":"\/languages","Network":false,"Title":"Admin Columns","AuthorName":"AdminColumns.com"},"cred-commerce\/plugin.php":{"GitHub URI":"","Woo":"","Name":"Toolset CRED Commerce","PluginURI":"https:\/\/toolset.com\/home\/cred-commerce\/","Version":"1.5","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com\/","TextDomain":"cred-commerce","DomainPath":"","Network":false,"Title":"Toolset CRED Commerce","AuthorName":"OnTheGoSystems"},"cred-frontend-editor\/plugin.php":{"GitHub URI":"","Woo":"","Name":"Toolset CRED","PluginURI":"https:\/\/toolset.com\/home\/toolset-components\/#cred","Version":"1.9.2","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com\/","TextDomain":"cred-frontend-editor","DomainPath":"","Network":false,"Title":"Toolset CRED","AuthorName":"OnTheGoSystems"},"facetwp-beaver-builder\/facetwp-beaver-builder.php":{"GitHub URI":"facetwp\/facetwp-beaver-builder","Woo":"","Name":"FacetWP - Beaver Builder","PluginURI":"","Version":"1.0.4","Author":"FacetWP, LLC","AuthorURI":"https:\/\/facetwp.com\/","TextDomain":"facetwp-beaver-builder","DomainPath":"","Network":false,"Title":"FacetWP - Beaver Builder","AuthorName":"FacetWP, LLC"},"facetwp-relevanssi\/facetwp-relevanssi.php":{"GitHub URI":"facetwp\/facetwp-relevanssi","Woo":"","Name":"FacetWP - Relevanssi integration","PluginURI":"","Version":"0.5.1","Author":"FacetWP, LLC","AuthorURI":"https:\/\/facetwp.com\/","TextDomain":"facetwp-relevanssi","DomainPath":"","Network":false,"Title":"FacetWP - Relevanssi integration","AuthorName":"FacetWP, LLC"},"facetwp\/index.php":{"GitHub URI":"","Woo":"","Name":"FacetWP","PluginURI":"","Version":"3.0.4","Author":"FacetWP, LLC","AuthorURI":"https:\/\/facetwp.com\/","TextDomain":"facetwp","DomainPath":"","Network":false,"Title":"FacetWP","AuthorName":"FacetWP, LLC"},"jetpack\/jetpack.php":{"GitHub URI":"","Woo":"","Name":"Jetpack by WordPress.com","PluginURI":"https:\/\/jetpack.com","Version":"5.3","Author":"Automattic","AuthorURI":"https:\/\/jetpack.com","TextDomain":"jetpack","DomainPath":"\/languages\/","Network":false,"Title":"Jetpack by WordPress.com","AuthorName":"Automattic"},"post-meta-inspector\/post-meta-inspector.php":{"GitHub URI":"","Woo":"","Name":"Post Meta Inspector","PluginURI":"http:\/\/wordpress.org\/extend\/plugins\/post-meta-inspector\/","Version":"1.1.1","Author":"Daniel Bachhuber, Automattic","AuthorURI":"http:\/\/automattic.com\/","TextDomain":"post-meta-inspector","DomainPath":"","Network":false,"Title":"Post Meta Inspector","AuthorName":"Daniel Bachhuber, Automattic"},"relevanssi\/relevanssi.php":{"GitHub URI":"","Woo":"","Name":"Relevanssi","PluginURI":"http:\/\/www.relevanssi.com\/","Version":"3.6.0","Author":"Mikko Saari","AuthorURI":"http:\/\/www.mikkosaari.fi\/","TextDomain":"relevanssi","DomainPath":"","Network":false,"Title":"Relevanssi","AuthorName":"Mikko Saari"},"searchwp\/searchwp.php":{"GitHub URI":"","Woo":"","Name":"SearchWP","PluginURI":"https:\/\/searchwp.com\/","Version":"2.8.15","Author":"SearchWP, LLC","AuthorURI":"https:\/\/searchwp.com\/","TextDomain":"searchwp","DomainPath":"","Network":false,"Title":"SearchWP","AuthorName":"SearchWP, LLC"},"toolset-maps\/toolset-maps-loader.php":{"GitHub URI":"","Woo":"","Name":"Toolset Maps","PluginURI":"https:\/\/toolset.com\/documentation\/user-guides\/display-on-google-maps\/","Version":"1.3.0","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com","TextDomain":"toolset-maps","DomainPath":"","Network":false,"Title":"Toolset Maps","AuthorName":"OnTheGoSystems"},"types-access\/types-access.php":{"GitHub URI":"","Woo":"","Name":"Toolset Access","PluginURI":"https:\/\/toolset.com\/home\/types-access\/?utm_source=accessplugin\u0026utm_campaign=access\u0026utm_medium=release-notes-plugins-list\u0026utm_term=Visit plugin site","Version":"2.4.3","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com\/","TextDomain":"types-access","DomainPath":"","Network":false,"Title":"Toolset Access","AuthorName":"OnTheGoSystems"},"types\/wpcf.php":{"GitHub URI":"","Woo":"","Name":"Toolset Types","PluginURI":"http:\/\/wordpress.org\/extend\/plugins\/types\/","Version":"2.2.16","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com","TextDomain":"types","DomainPath":"","Network":false,"Title":"Toolset Types","AuthorName":"OnTheGoSystems"},"user-menus\/user-menus.php":{"GitHub URI":"","Woo":"","Name":"User Menus","PluginURI":"https:\/\/wordpress.org\/plugins\/user-menus\/","Version":"1.1.2","Author":"Jungle Plugins","AuthorURI":"https:\/\/jungleplugins.com\/","TextDomain":"user-menus","DomainPath":"","Network":false,"Title":"User Menus","AuthorName":"Jungle Plugins"},"woocommerce-subscriptions\/woocommerce-subscriptions.php":{"GitHub URI":"","Woo":"","Name":"WooCommerce Subscriptions","PluginURI":"http:\/\/www.woocommerce.com\/products\/woocommerce-subscriptions\/","Version":"2.2.7","Author":"Prospress Inc.","AuthorURI":"http:\/\/prospress.com\/","TextDomain":"woocommerce-subscriptions","DomainPath":"","Network":false,"Title":"WooCommerce Subscriptions","AuthorName":"Prospress Inc."},"woocommerce-views\/views-woocommerce.php":{"GitHub URI":"","Woo":"","Name":"Toolset WooCommerce Views","PluginURI":"https:\/\/toolset.com\/documentation\/views-inside\/woocommerce-views\/","Version":"2.7.4","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com","TextDomain":"woocommerce-views","DomainPath":"","Network":false,"Title":"Toolset WooCommerce Views","AuthorName":"OnTheGoSystems"},"woocommerce\/woocommerce.php":{"GitHub URI":"","Woo":"","Name":"WooCommerce","PluginURI":"https:\/\/woocommerce.com\/","Version":"3.1.2","Author":"Automattic","AuthorURI":"https:\/\/woocommerce.com","TextDomain":"woocommerce","DomainPath":"\/i18n\/languages\/","Network":false,"Title":"WooCommerce","AuthorName":"Automattic"},"wp-smushit\/wp-smush.php":{"GitHub URI":"","Woo":"","Name":"WP Smush","PluginURI":"http:\/\/wordpress.org\/extend\/plugins\/wp-smushit\/","Version":"2.7.5","Author":"WPMU DEV","AuthorURI":"http:\/\/premium.wpmudev.org\/","TextDomain":"wp-smushit","DomainPath":"","Network":false,"Title":"WP Smush","AuthorName":"WPMU DEV"},"wp-views\/wp-views.php":{"GitHub URI":"","Woo":"","Name":"Toolset Views","PluginURI":"https:\/\/toolset.com\/?utm_source=viewsplugin\u0026utm_campaign=views\u0026utm_medium=plugins-list-full-version\u0026utm_term=Visit plugin site","Version":"2.4.1","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com","TextDomain":"wp-views","DomainPath":"","Network":false,"Title":"Toolset Views","AuthorName":"OnTheGoSystems"}},"mu_plugins":[],"dropins":{"db.php":{"GitHub URI":"","Woo":"","Name":"db.php","PluginURI":"","Version":"","Description":"","Author":"","AuthorURI":"","TextDomain":"","DomainPath":"","Network":false,"Title":"","AuthorName":""},"object-cache.php":{"GitHub URI":"","Woo":"","Name":"Memcached Redux","PluginURI":"http:\/\/wordpress.org\/extend\/plugins\/memcached\/","Version":"0.1.2","Description":"The real Memcached (not Memcache) backend for the WP Object Cache.","Author":"Scott Taylor - uses code from Ryan Boren, Denis de Bernardy, Matt Martz, Mike Schroder","AuthorURI":"","TextDomain":"","DomainPath":"","Network":false,"Title":"Memcached Redux","AuthorName":"Scott Taylor - uses code from Ryan Boren, Denis de Bernardy, Matt Martz, Mike Schroder"}}},"theme":{"Name":"Beaver Builder Child Theme","ThemeURI":null,"Author":"\u003Ca href=\u0022http:\/\/www.fastlinemedia.com\u0022\u003EThe Beaver Builder Team\u003C\/a\u003E","AuthorURI":null,"Template":"bb-theme","Version":"1.0","TextDomain":null,"DomainPath":null},"extra-debug":{"access":{"rules":{"types":[],"taxonomies":[]},"debug":[],"settings":{"types":{"_custom_read_errors":{"business-listing":{"permissions":{"read":{"everyone":"","editor":"","shop_manager":"","author":"","contributor":"","customer":"","bbp_blocked":"","bbp_keymaster":"","bbp_moderator":"","bbp_participant":"","bbp_spectator":"","subscriber":"","guest":""}}},"directory-listing":{"permissions":{"read":{"everyone":"","editor":"","shop_manager":"","author":"","contributor":"","customer":"","bbp_blocked":"","bbp_keymaster":"","bbp_moderator":"","bbp_participant":"","bbp_spectator":"","subscriber":"","guest":""}}}},"_custom_read_errors_value":{"business-listing":{"permissions":{"read":{"everyone":"","editor":"","shop_manager":"","author":"","contributor":"","customer":"","bbp_blocked":"","bbp_keymaster":"","bbp_moderator":"","bbp_participant":"","bbp_spectator":"","subscriber":"","guest":""}}},"directory-listing":{"permissions":{"read":{"everyone":"","editor":"","shop_manager":"","author":"","contributor":"","customer":"","bbp_blocked":"","bbp_keymaster":"","bbp_moderator":"","bbp_participant":"","bbp_spectator":"","subscriber":"","guest":""}}}},"business-listing":{"mode":"not_managed","permissions":{"publish":{"roles":["editor","shop_manager","author","customer","bbp_participant","subscriber"]},"delete_any":{"roles":["editor","shop_manager"]},"edit_any":{"roles":["editor","shop_manager"]},"delete_own":{"roles":["editor","shop_manager","author","contributor","customer","bbp_moderator","bbp_participant","subscriber"]},"edit_own":{"roles":["editor","shop_manager","author","contributor","customer","bbp_moderator","bbp_participant","subscriber"]},"read":{"roles":["editor","shop_manager","author","contributor","customer","bbp_keymaster","bbp_moderator","bbp_participant","bbp_spectator","subscriber","guest"]}}},"directory-listing":{"mode":"not_managed","permissions":{"publish":{"roles":["editor","shop_manager","author"]},"delete_any":{"roles":["editor","shop_manager"]},"edit_any":{"roles":["editor","shop_manager"]},"delete_own":{"roles":["editor","shop_manager","author","contributor","customer"]},"edit_own":{"roles":["editor","shop_manager","author","contributor","customer"]},"read":{"roles":["editor","shop_manager","author","contributor","customer","subscriber","guest"]}}}},"tax":[],"third_party":{"__CRED_CRED":{"__CRED_CRED_GROUP":{"permissions":{"delete_other_posts_with_cred":{"roles":["administrator","editor","shop_manager","author"]},"delete_own_posts_with_cred":{"roles":["administrator","editor","shop_manager","author","contributor","customer","bbp_keymaster","bbp_moderator","bbp_participant","bbp_spectator","subscriber"]},"create_posts_with_cred_9876":{"roles":["administrator","editor","shop_manager","author","contributor","customer","bbp_keymaster","bbp_moderator","bbp_participant","bbp_spectator","subscriber"]},"edit_other_posts_with_cred_10440":{"roles":["administrator","editor","shop_manager","author","contributor","customer"]},"edit_own_posts_with_cred_10440":{"roles":["administrator","editor","shop_manager","author","contributor","customer","subscriber"]},"create_posts_with_cred_10407":{"roles":["administrator","editor","shop_manager","author","contributor","customer"]}},"mode":"permissions"}},"__CRED_CRED_USER":{"__CRED_CRED_USER_GROUP":{"permissions":{"delete_other_users_with_cred":{"roles":["administrator","editor","shop_manager"]},"delete_own_user_with_cred":{"roles":["administrator","editor","shop_manager","author","contributor","customer","subscriber"]}},"mode":"permissions"}}}},"errors":[]},"types":{"add_resized_images_to_library":0,"register_translations_on_import":1,"images_remote":0,"images_remote_cache_time":"36","help_box":"by_types","hide_standard_custom_fields_metabox":"show","postmeta_unfiltered_html":"on","usermeta_unfiltered_html":"on"},"CRED":{"wizard":1,"syntax_highlight":1,"cache_notice":1,"export_settings":1,"export_custom_fields":1,"dont_load_cred_css":0,"use_bootstrap":"1","autogeneration_email":{"subject":"Welcome new user","body":"[username]Your username is: %cuf_username%[\/username]\\n[nickname]Your nickname is: %cuf_nickname%[\/nickname]\\n[password]Your password is: %cuf_password%[\/password]"},"enable_post_expiration":0},"views":{"views_template_loop_blog":0,"wpv_bootstrap_version":"3","wpv_custom_conditional_functions":["woo_product_on_sale","woo_product_in_stock","wpv_woo_single_products_rating_func","wpv_woo_list_attributes_func","wpv_woo_show_upsell_func","wpv_woo_products_rating_on_listing_func","woo_has_product_subcategory","woo_shop_display_is_categories","wpv_woo_product_belongs_to_this_order"],"wpv_custom_inner_shortcodes":[],"wpv_debug_mode":"","wpv_debug_mode_type":"compact","wpv_map_plugin":0,"wpv_show_edit_view_link":1,"wpv_show_hidden_fields":"","wpv_saved_auto_detected_framework":"","wpv_codemirror_autoresize":"","wpv_enable_pagination_manage_history":true,"wpv_enable_parametric_search_manage_history":true,"views_template_for_directory-listing":0}}}

[Brent Urbanski]

I've just discovered this issue exists only when a page builder (Beaver Builder) is used to style the View Template aka the "Loop Item" in a View. I rebuilt the View Template directly in the native HTML and CSS fields and now the styling remains after ajax parametric filters are applied.

I would much prefer to use a page builder to style my Templates (loop items). Do you know how I can retain my page builder styling with ajax filtered results?

[Minesh]

Well - you should not use beaver builder to design your view's loop output as its not suggested. Please check the following screenshot:
=> hidden link

You should use default View Template directly to design your view's loop output to work with ajax.

More info:
=> https://toolset.com/documentation/user-guides/benefits-of-templates-for-custom-types-bb/
=> https://toolset.com/documentation/user-guides/benefits-of-templates-for-custom-types-bb/best-practices-creating-templates-beaver-builder/

[Brent Urbanski]

If I should not be using a page builder within the View Template, then why is there a option (big button) to use a page builder in this location? This is very confusing/misleading and I suggest your team remove the button from this location if it's not supposed to be used.

[Minesh]

Well - as you can see with our Doc - you will see following message:
=> https://toolset.com/documentation/user-guides/front-page-filters/

CRED forms and shortcodes from 3rd party plugins (for example, Visual Composer) will not work properly when any type of AJAX call is used inside Content Templates, Views, and WordPress Archives. This includes AJAX pagination and custom search.

But
BB is excluded and it should support ajax and it looks like compatibility issue. I've hotfix with me I would like to apply on your site.

Could you please share problem URL and temporary access details where I can apply the fix and test this.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - as I inform you with my previous reply that BB is excluded and it should support Ajax.

We already published hotfix for that. Could you please confirm that it works for you. You need to follow the guidelines given with the following link in order to fix the issue.
=> https://toolset.com/errata/ajax-search-breaks-the-display-in-a-content-template-built-with-beaver-builder/

[Brent Urbanski]

Minesh,

This fix worked!

Thanks for your help and sorry for not understanding your last few messages.

-Brent