Ajaxify website with blocks

This support ticket is created Il y a 2 années et 11 mois. 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
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9: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/Hong_Kong (GMT+08:00)

Ce sujet contient 2 réponses, a 2 voix.

Dernière mise à jour par glenn Il y a 2 années et 11 mois.

Assisté par: Luo Yang.

Auteur

Publications

juillet 21, 2022 at 1:29 #2422425

glenn

Tell us what you are trying to do? I am trying to use ajax to load only the main content when a link is clicked. This works but my block view does not layout properly.

Is there any documentation that you are following?

Is there a similar example that we can see?
lien caché If you go here you will see the view at the bottom of the page in three columns on the desktop. But when you navigate to another page, the view only shows in one column. I probably need to trigger or relaod some script but i cannot figure out how the view is layed out.

What is the link to your site?
lien caché

juillet 22, 2022 at 6:41 #2422947

Luo Yang

Hello,

Toolset Blocks is using inline JS codes to produce the CSS style, it won't be triggered in your custom AJAX call.

As a workaround, you can put that CSS codes into your theme file "style.css", for example:

.js-wpv-view-layout-10 .js-wpv-loop-wrapper > .tb-grid {
    grid-template-columns: minmax(0, 0.33333333333333fr) minmax(0, 0.33333333333333fr) minmax(0, 0.33333333333333fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-auto-flow: row;
}

the number 10 is your view block's ID

juillet 25, 2022 at 1:30 #2424689

glenn

My issue is resolved now. Thank you!