Skip Navigation

[Fermé] Custom CSS not working after AJAX results update.

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.

Marqué : 

This topic contains 5 réponses, has 2 voix.

Last updated by Shane Il y a 1 an et 3 mois.

Assigned support staff: Shane.

Auteur
Publications
#1563089

Tell us what you are trying to do?
I have a filter with check boxes and with AJAX result to update on changing filter. I used custom CSS to style the checkboxes. After the filter update the CSS doesn't apply anymore. If i choose "Full page refresh when visitors click on the search button" then it works. But the cient doesnt want a submit button but the AJAX direct filtering.

Is there any documentation that you are following?
No

Is there a similar example that we can see?
hidden link Click on any of the filters and you will see the styled checkbox. After filtering the custom CSS is gone. How can we keep the CSS after the AJAX filtering?

What is the link to your site?
hidden link

#1563181

Shane
Supporter

Languages: Anglais (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Guido,

Thank you for getting in touch.

Is this a purely css customization? Is there any Javascript involved in this ?

This is consistent with JS not being triggered after the AJAX pagination. If there is some form of JS involved please let me know.
Thanks,
Shane

#1565517

Hi Shane,

Yes there is some jQuery involved.

I am trying to style the filter text. Following this tutorial: hidden link

But i need a <span> on the label to make it work. So i added some jQuery to add the <span>.

Code used: jQuery("label").append("<span class='checkmark'></span>");

Then i saw that i need to use "front-end events" in the filter option in views.

So i now have the following code:
jQuery("label").append("<span class='checkmark'></span>");

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

jQuery("label").append("<span class='checkmark'></span>");

});

Now it all works. But not perefcly.. You can see here: hidden link

I was able to create this but if you click on one of the filters it still disappears for a second....

Plus i want it to be a certain color when not checked and a certain color when checked. It does that but when i changethe color it doesn't work for some reason.

I also tried to make the label text a different color when checked but could not figure it out.

Is there any other way to style it the way i did? I am trying to get something like this: hidden link

There the filtering goes really smooth and the filter option are nicely styled. Checked or unchecked.

Thanks
Guido

#1565667

Shane
Supporter

Languages: Anglais (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Guido,

Given that your function is added to a callback then this is why you see it flashing, because the jQuery has to be reinitialized.

Could you send me a screenshot of your search on the backend as there might be a setting that could help with your filters.

If you are refreshing the filters i.e setting the filters to be dependent by disabling or re-enabling then this could help with the flashing. However I cannot 100% be certain.

Send me a screenshot of your Parametric Search Settings on the backend of your view.

Thanks,
Shane

#1569929

Hi Shane

I was able to resolve it with just CSS. Having jQuery change things just doesn't work nicely.

The only thing what i can not figure out is how to style the label text when the checkbox or radio button is checked? In a lot of tutorials the label comes after the input. But with toolset the label becomes for the input. Any rreason why? And how can i style the label if the chekcbox or radio is checked?

Thanks
Guido

#1570017

Shane
Supporter

Languages: Anglais (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Guido,

Based on the nature of the issue you will perhaps need to use some JS to modify the text.

I mean you can apply css using JS. SO what you can do is to add a listener for when the item is checked. Then you can use the JS to add a css class to the label.

In this your label will get the correct styling when selected.

What you can do is to just apply the styling after the results have been loaded so the filter doesn't have to refresh.

Please let me know if this helps.
Thanks,
Shane

Le sujet ‘[Fermé] Custom CSS not working after AJAX results update.’ est fermé à de nouvelles réponses.