|
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
|
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
|
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
|
September 7, 2023 at 6:22 am
Hmm, true. Good call!
I’m glad you found a solution for this 🙂
|
