Support

Home Forums Event Espresso Premium Calendar Legend Link – jQuery issue

Calendar Legend Link – jQuery issue

Posted: September 4, 2023 at 9:01 pm


Digital Services Lab

September 4, 2023 at 9:01 pm

EE Calendar outputs Category Legend links above the calendar in the form /?cat=cat#espresso_calendar

When you click on these, it appears that jQuery.js is preventing default link behaviour and not reloading the page even though query parameters are present so the url is not the same.

The result is that it behaves simply like an anchor link and scrolls down a bit without filtering the categories.

Other references to this behaviour on StackOverflow though suggesting the browser is doing this: links with query parameters and anchors

The solution provided in the above link is to submit the page as a form.
Is this something that can be addressed?


Tony

  • Support Staff

September 5, 2023 at 3:15 am

Hi there,

jQuery itself is not preventing the default link behaviour, it’s more likely to be your theme.

Looking over your site I saw your using Divi, which reminded me I’ve seen this before.

You can use this fix here:

https://gist.github.com/Pebblo/2fe9648492d16108d121311c70235652#file-tw_ee_cal_remove_anchors-php

You can add that to a custom functions plugin on your site and we have some documentation on creating one here:

https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/

On digging a little further, I then found an old thread about this from someone you may also know 🙂

https://eventespresso.com/topic/calendar-category-legend-click-to-select-a-category/


Digital Services Lab

September 5, 2023 at 5:21 pm

Thanks Tony – sorry I didn’t remember asking about this previously. 😐

Indeed, I can see the script Divi is using. I don’t understand why they’ve implemented it though since anchor links (without query strings) would just scroll anyway on the same page.

Seems unnecessary and poor practice to break the default behaviour like that – but that’s Elegant Themes for you!


Digital Services Lab

September 5, 2023 at 6:16 pm

Some additional information what may help others.

The script Divi outputs is scripts.min.js which has the handle divi-custom-script

The Divi click event is attached on DOMContentLoaded so you also need to run the .off() function later than the Divi script and on DOMContentLoaded.

I did it like this and it works nicely without having to remove the anchor.


function dsl_remove_ee_category_legend_click_events(){

    wp_register_script( 'dsl-ee-cat-legend-fix-js', get_stylesheet_directory_uri() . '/js/dsl-ee-cat-legend-fix.js', array('divi-custom-script','jquery'), 1.03, true );
    wp_enqueue_script( 'dsl-ee-cat-legend-fix-js' );
    
}
add_action( 'wp_enqueue_scripts', 'dsl_remove_ee_category_legend_click_events', 10);

And have the script in a separate file


(function($){
    $( document ).ready( function() {
        $('.ee-category a').off('click');
        }       
    );
})(jQuery)


Tony

  • Support Staff

September 6, 2023 at 3:34 am

Thanks Tony – sorry I didn’t remember asking about this previously. 😐

No apology needed 🙂

Indeed, I can see the script Divi is using. I don’t understand why they’ve implemented it though since anchor links (without query strings) would just scroll anyway on the same page.

Seems unnecessary and poor practice to break the default behaviour like that – but that’s Elegant Themes for you!

Agreed, the ever growing list of exceptions to add into Divi tells the same story to me.

Some additional information what may help others….

Thank you for sharing your solution with others.

You may be better switching to something like this:

https://gist.github.com/Pebblo/2fe9648492d16108d121311c70235652#file-tw_ee_cal_remove_js_click_events-php

That uses wp_inline_script to add the JS onto the espresso_calendar script without having to register the custom script as a dependency. You can switch that out to also document.ready if needed.

Both work, just another solution to add to the mix 🙂


Digital Services Lab

September 6, 2023 at 5:33 pm

You may be better switching to something like this:
https://gist.github.com/Pebblo/2fe9648492d16108d121311c70235652#file-tw_ee_cal_remove_js_click_events-php
That uses wp_inline_script to add the JS onto the espresso_calendar script without having to register the custom script as a dependency. You can switch that out to also document.ready if needed.

I tried that first and it didn’t work for me because the click event is added on DOMContentLoaded.

Yep, you could fix that by updating the your script to also fire when DOMContentLoaded but that doesn’t ensure it loads in the correct order so you may still end up with it not working.

Personally I prefer to add the script with a dependency so that I am certain that it loads after the Divi script. There are too many variables to otherwise be 100% sure that espresso_calendar script loads after divi-custom-script (caching & optimisation plugin settings, Divi settings etc).


Tony

  • Support Staff

September 7, 2023 at 6:22 am

Hmm, true. Good call!

I’m glad you found a solution for this 🙂

The support post ‘Calendar Legend Link – jQuery issue’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso