Tabbed content load / render issue - add event trigger / initiate javascript function

Support
#1

I have an issue with how our shortcode content is rendering within tabs element. I have a shortcode for a calendar within each tab. I have asked the developer of the plugin for support and they provided a solution. How might I be able to add and event trigger to initiate the provided javascript functions to initiate within cornerstone?

Here is the page we are having issues with: https://dev.sd19.a2hosted.com/schedule-calendar/

Fix from the plugin developer:
"
I am noticing that if you resize the window, it triggers a JavaScript event that will get the calendar to render properly.

When the user clicks one of the tabs, you’ll need to run these two JavaScript functions:

r34ics_init();

r34icspro_init();

If you have an event trigger linked to clicking on those tabs, you’d just need to insert those two lines of code there.

"

Thank you :slight_smile:

Tabbed content load / render issue
#2

Hey @eyedia,

Thanks for reaching out!

I can see your issue in your schedule calendar but we need to check on your setup properly. To do that, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

secure-note
secure-note1040×250 15.3 KB

Thank you.

#3

Thank you Marc, I added the details in a secure note

#4

Hey @eyedia,

You could try this jQuery code, it works when you click the tabs but I am unsure why the given function from the plugin doesn’t work. You can reach out again to your plugin developer for further assistance.

jQuery(document).ready(function($){
	$('.schedule-tabs .x-tabs-list ul li button').on('click', function(){
		r34ics_init();
		r34icspro_init();
	});
});

Please note that custom code is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

#5

Hi @marc_a Thank you for your response. I tried and it unfortunatly didn’t work. I spoke with the plugin developer who asked:
"Do you happen to know if those elements are being added dynamically into the page (DOM) after loading? That’s my first guess as to the cause of the issue. You may want to try changing this line:

$('.schedule-tabs .x-tabs-list ul li button').on('click', function(){

to this:

$(document).on('click', '.schedule-tabs .x-tabs-list ul li button', function(){

If the elements are loading dynamically, this approach will catch them, but I’m just working on a hunch here that that’s the issue."

Are you able to let me know if those elements are being added dynamically into the page (DOM) after loading?

I’d love to figure this out as I do see it potentially helping with other situations where shortcode is embeded within tabs.

Thank you and please let me know

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.

#7

Hey @eyedia,

I just give you the idea on how the tabs works in JS. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Thank you for understanding.