Skip Navigation

[Resolved] Inline styles of filter results lost after Ajax filtering

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

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 5 replies, has 2 voices.

Last updated by erasmusS 6 years ago.

Assisted by: Christian Cox.

Author
Posts
#628214
Bildschirmfoto 2018-03-26 um 10.28.04.png
Bildschirmfoto 2018-03-26 um 10.27.56.png
Bildschirmfoto 2018-03-26 um 10.27.49.png
Bildschirmfoto 2018-03-26 um 10.27.42.png

I am trying to: I want to set up product filtering, which is working fine so far. On click on a single product a pop up overlay is opening, showing the product with a styled table. However after applying some filters (or even by clicking only the reset button) the instyle CSS of the popup page is not showing. All styles are lost.
Is there any way to "tell" the view that after all Ajax loading events all instyle styles should be applied as it can be seen when you refresh the page?
I have experimented with several event handles like

("jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.effect (string) The View AJAX pagination effect
* data.speed (integer) The View AJAX pagination speed in miliseconds
* data.layout (object) The jQuery object for the View layout wrapper
*/

});

but couldn´t improve the situation. I just don´t understand while the ajax filtering erases all instyle table data. Unfortunately i cannot write a CSS rule to the the tables.

Link to a page where the issue can be seen: hidden link

I expected to see: the tables with all styles

Instead, I got: the tables are displayed "nakedly" without any applied styles. If i refresh the page all styles are back there again.

Dear toolset team, any help is highly appreciated, i hope you can help me out on this issue!
Thanks in advance and have a great start into te week!

Erasmus

#628398

Hi, I just followed the same steps and I'm not seeing the same results. Are you using a specific browser? I'm on a Mac and I've tested Chrome, Firefox, and Safari with the same results - I see the table styled correctly after applying filters or resetting the View. Can you clear your browser cache and try again?

#628868

Dear Christian,

thanks for getting back to me – your answer landed in my SPAM and i just randomly checked if something has moved here 🙂
Yes you´er right, i fixed the fact that the Ajax filtering disabled my instill CSS by adding classes to certain lines and "!important" them to keep the styles by any circumstances. This worked in the end. It´s surely not the cleanest solution, but i achieved what i wanted by myself.
Still, i am wondering what causes this disappering of all instyles sitewide.
Anyways, i appreciate your help a lot!
Have a great week, toolset is one of the best inventions since wordpress itself 😉
Erasmus

#629072
5_Bildschirmfoto 2018-03-28 um 11.48.54.png
4_Bildschirmfoto 2018-03-28 um 11.48.47.png
3_Bildschirmfoto 2018-03-28 um 11.48.38.png
2-Bildschirmfoto 2018-03-28 um 11.48.24.png
1-Bildschirmfoto 2018-03-28 um 11.48.16.png

Dear Christian,

i am so sorry, but i have to re-open the ticket again.
I have the same filtering issue again with another element on the filter result page that is not working anymore, but only AFTER applying some filter parameters.

Here´s what going on:
i have a filterable item page:

hidden link

If you click on one of the watches a popup overlay opens with the aibility to zoom into products with a zoom lens.
A click outside the box closes the overlay.
Now, if you apply any filters or click the grey button"product filtern" (=filter products) the filtering works perfectly.

But if you click on one of the items now and try to zoom in, it only opens the picture in its original size.
The ajax filtering seems to disable the zooming effect.

If i set the filtering to "refresh page after filtering" everything works fine.
So my question is: is there any tweak i can apply to tell the filtering to behave as if the page was reloaded?
I just don´t understand why "inline styles" and javascripts are lost after the Ajax filtering …

If you need a temporary wordpress account for my site, please let me know!

I have listed the chronology of this issue as screenshot attache dto this mail.

I´d appreciate it so much if you could have a look into it, since i am really stuck with this issue.
Thank you so much in advance for your help!
Regards!
Erasmus

#629159

The reason this happens is typically that your theme or plugin files are designed to initialize some functionality on page load. When that happens, the functionality is bound to the elements that exist on the page. When an AJAX update happens, those old elements are removed and new elements are put in their places. The functionality that was bound to the original elements is no longer bound to the new elements, so there may be problems.

In this case, it looks like the MagicZoom module should be reinitialized after the AJAX load event. Try this:
- Edit the View
- Open the JS editor panel beneath the Filter Editor section
- Enter the following code:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
	if (typeof MagicZoom != 'undefined') {
		MagicZoom.start();
	}
});

You can click the "Frontend events" button to see different options for working with pagination and search events.

#629166

Christian, you are the MVP – it works like a charm!!!

I was pretty sure that i had to sort of re-register the Zoom, but as i rather come from a design background than from a programming background i just got stuck in the question, how i would re-initialize the event.
You not only pointed me in the right direction but literally solved my problem within 2 lines of code!
You can´t imagine how grateful i am – thank you so much!
Once again, your support is just top notch, didn´t regret for a second to did this lifetime upgrade a couple of days ago!

Have a fabulous Easter holiday and all the best from Germany!

Erasmus

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.