Skip Navigation

[Resolved] Results of filters not showing properly with ajax

This support ticket is created 6 years, 7 months 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.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 7 replies, has 2 voices.

Last updated by Minesh 6 years, 5 months ago.

Assisted by: Minesh.

Author
Posts
#869502

I'm trying to display a list of filtered elements.
I'm using the Divi Builder and some CSS to add a style to my list.
When the page load the first time, everything's fine, but when I select some options in the filters, the style break.
It seems to be linked to the custom search settings. On "AJAX results update" the style break, on "Full page refresh" it's fine.

I'd like to use AJAX without the style failing.
Thanks.

#871801

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Well - view's offers the ajax filter hooks that you may try to use and check if that helps.

When you visit view's Filter section's JS box - you will see a button "Frontend Events". When you click it it will allow you to choose ajax callback events for parametric search.

Refer this image:
=> hidden link

For example:

jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.view_changed_form (object) The jQuery object for the View form after being updated
	* data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode
	* data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode
	*/
	
});

you should try to use above JS event hook and try to update custom styling from there. Please try to play with that and let me know if that works 🙂

#872740
Formations 0.png
Formations 2.png

It doesn't work... Instead of using AJAX to show result, I use the full page refresh on search click.
It fixed the style that was not displayed right, but now, all elements at the bottom of the page are broken.
Again, I use the divi builder to put element on my page.
Here some screenshots of what it should always be displayed and what happened when I click on the search button.

#875398

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Ok - Could you please try to identify what CSS causing the conflict or is it any plugin.

Additionally, here is the Doc links that may help you, how you can use Divi:
=> https://toolset.com/documentation/recommended-themes/toolset-divi-integration/create-templates-for-custom-post-types-with-divi-builder-and-toolset/
=> https://toolset.com/documentation/recommended-themes/toolset-divi-integration/displaying-fields-inside-any-divi-module/

If above does not hep, I need problem URL and access details so I can check whats going wrong there.

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

#886976

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Yes, I can see the issue on your install that its losing the style after ajax filter.

I need duplicator copy of your site. Could you please send me your site copy:
=> hidden link

#887028

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Also - could you please check with Divi support that how to load the required assets (CCS + JS) with AJAX call. Please check with them if they have any hooks or filters that we can use. Pass on the same problem URL with them so they will see the issue and guide us.

#891744

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Thank you for sharing duplicator package. I've forward the issue to our next level support for further debug. Please hold on for further updates.

#953605

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Well - there is no easy or proper way to get the suffix number we are using when entering a View. The number highly depends on the calback function to use for rendering the section, and we can not get such a big amount of data, and the fill our code of checks against the existence of Divi methods.

In addition, Divi can produce those class names cleanly because they follow the page render flow, but on AJAX we have no easy way to do that .

Such class names should not be used for styling purposes because their existence and matching order can not be ensured, and specific, dedicated ones should be used.

et_pb_section_0
  .et_pb_row_0
    .et_pb_text_0

This issue is wont fix for us.