[Resolved] Legacy View – refresh Javascript after a 'Slide' action

[Author]

Posts

[Adrian Robbins]

Tell us what you are trying to do?

We are using SwiperJS to do a mobile touch slider in a Legacy View.

We are using this Javascript from SliderJS and it automatically adjusts the height of the slide with 'autoHeight: true'

This works on first loading the View slider, but as you swipe through the hotel slides, the height of the new slide does not change and the pagination row goes over the map.

var swiper = new Swiper(".mySwiper", {
autoHeight: true,
spaceBetween: 100,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});

Just wondering if there is a way in the Legacy View settings, that we can reload this Javascript code each time the slide changes?

You can see it working at hidden link

click on the HOTEL TAB and then swipe through the hotels.

If you click on the sub-set Map or Info Tabs for each hotel, you will see that the height of the tab panel is not 'auto' adjusting. However, if you don't click on any of the sub-tabs it works fine.

Any help or advice is much appreciated.

[Minesh]

Hello. Thank you for contacting the Toolset support.

You can use the view's ajax callback hook: js_event_wpv_parametric_search_results_updated

For example:
- you should try to add your desired JS code to this hook. You can add this hook to your view's Custom JS box.

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
    */
         
  //////YOUR CUSTOM CODE GOES HERE
        
});

More info:
- https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

[Adrian Robbins]

Hi Minesh

Thank you for your very quick response.

However, we are not using Ajax pagination, so the Callback function is not available in the legacy View panel.

We are using SwiperJS to facilitate the 'pagination' because we need a touch slider for mobiles and we need to reload the SwiperJS Javascript each time a slide is swiped to the new slide so that it resets the height of that slide automatically.

Is there another way of achieving this?

Kind regards
Ade

[Minesh]

Can you please share problem URL and admin access details and let me see what hook we can use.

*** 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 have set the next reply to private which means only you and I have access to it.

[Minesh]

I checked and I can see you are using the swiper JS but I'm not sure what event we have to use to adjust the height when you click on the tabs that is added within slider.

I tried to add the following attribute:

     calculateHeight:true,

But somehow it does not help. You can check with swiper JS support as they will help you in this regard as this is not Toolset issue but the custom JS you added or using.

[Adrian Robbins]

Thanks for checking, and I suspect that adding a Kadence Pro Tab block within a Tab Block is a step too far.

The SwiperJS code we have works fine if there is only one tab group and the height dynamically changes based on the slide.

We can talk to the client about tidying up the narrative so that it is all about the same height and then set a fixed height for the slider. Or we can do away with the second set of tabs, and have the Intro, Info and map all on a single slide.

I thought that maybe I had missed something, but obviously not.

[Minesh]

You did not but to support such custom edit is beyond the scope of our support policy so please kindly get in touch with the CSS/JS expert who can help you in this matter.

You can even contact any of our certified partner from the following link:
- https://toolset.com/contractors/

[Adrian Robbins]

My issue is resolved now. Thank you!