linking into the month reload jquery

Hi @aaronbennett2097,

While our ability to help with customizations and 3rd-party integrations is limited, I’d like to learn more about this to try to help.

Could you try clearing caching plugins or server-side (if you have any)? Moreover, it would be good to try disabling and then re-enabling any JS/CSS optimization on your site and see if that makes a difference.

Let me know how it goes.

Best,
Abz

Hi Abz.

If I can explain the issue in a bit more detail before I start turning stuff off as it’s quite a complex site and don’t want to make it worse and break other functionality.

If you visit the following link https://wild22.aaronbennettdesigns.co.uk/camps/ you’ll see (on desktop) the camp on the 2nd of November – if you click on this, it opens a foobox popup with details about the event and the inline shortcode [tribe_tickets post_id=”‘ . $mypost_id . ‘”] to display the ticket quantity and GET TICKETS button.

This works perfectly – the concept is that customers can purchase tickets without having to go to each event.

Now, if you scroll up and click on the arrow to go to November, the calendar updates to the November month. If you then click on the same event, the popup doesn’t work, even though I can see the foobox code in the inspector.

We have tried to use the following code to load the FOOBOX.init once the month has changed…

$(document).on(‘afterRequest.tribeEvents’, function(e){
FOOBOX.init();

But that doesn’t seem to work.

To make matters even more odd, if you view the month calendar on mobile where we don’t use foobox, but show a list of the events with the same tickets shortcode, that doesn’t work when you change month either – the – and + buttons don’t work.

I totally understand that this is outside of the scope of support, but am desperate to get this working as it’s a really efficient way of allowing customers to purchase multiple tickets without having to go back and forth between pages.

FYI, we aren’t using any caching or optimisation at the moment.

Really hope you can help point us in the right direction! Thank you so muhc in advance.

Aaron

Just to add further to this…

At the top of the month calendar, I’ve coded in a button to open the 2nd of November event → Click here to test the 2nd november event.

If you visit the page and click on it, the buttons for the quantity work. But if you change month and then click on the link, the popup shows, but the buttons from the tribe_tickets shortcode don’t work.

Something is blocking the jquery from firing after you change the month.

Hope that helps and thank you once again.

Hi @abzlevelup noticed on other support threads you asked to be tagged so you’re notified of these replies, so just doing that incase you missed the above.

Thanks
Aaron

Hi @aaronbennett2097, apologies for the delayed response, as we are experiencing a higher load in support. This is already out of our support scope regarding customizations. However, I’d be glad to suggest some thoughts to you.

Before initializing the FooBox, could you try adding latency settimeout and another layer of JS event that could check that the calendar section(div) is already loaded? I cannot share a code snippet with you, but this is the logic I could think of since I noticed that the FooBox fires after clicking and not after loading the section.

Let me know how it goes.

Best,
Abz

Hi @abzlevelup no need to apologise, any help is appreciated!!

I’ll look into adding the extra layer.

I do think we have two separate things happening here though, as even when we’re not using the foobox popup, if I change month, the ticket shortcode from events calendar isn’t working – the – and + buttons don’t work, which means the add button stays disabled.

If you have any thoughts on how I could get that to work, that’d be great.

Thanks again.

If anyone having a similar issue, the solution is that you need to initialize foobox after the ajax content is loaded so that foobox script can detect the new html code added to the page via ajax. So for that I’m using a following code and it works fine:

$(document).on('afterAjaxSuccess.tribeEvents', function(e){
   FOOBOX.init();
 });

Bravo Jimish!!

Thank you!!!