Events Calendar Pro and Caching

[fuyutski]

Hi all,

Effectively, I’ve started using WP-Rocket which is tremendously fast but has dented the way that Events Calendar Pro is rendering. (you should be able to see how it’s incorrectly rendered by going to http://thinkingofgod.org/ + http://thinkingofgod.org/events).

I’ve came down to the fact that this is a .css issue, as when I turn off css file optimisation it works correctly (as seen in the images here: http://brettnlucy.net/tmp/). Likewise, when I have js file optimisation the ‘collapse filter’ doesn’t work.

I am wondering if it’s possible to get a simple list of all the .css and .js files used by Events Calendar/Pro/Filter Bar so I can put them all in the exceptions and see if that solves the issue. One particular thing I want to also fix is removing the space between the event calendar options and the dropdown menu for the site — (as you can see, it’s not here (when .css optimisation is off: http://brettnlucy.net/tmp/Events.PNG)

[fuyutski]

I had to turn off the .css and .js file optimisation.

However, what it looks like with these on is:

http://brettnlucy.net/tmp/widget-css-on.PNG
http://brettnlucy.net/tmp/Events-css-on.PNG

[Brian]

Hi,

Sorry for the issues you are having. It looks like since we already minify everything for css and js that causes the issue.

Here is a list of the stylesheets and scripts while loading the main calendar:

https://gist.github.com/jesseeproductions/a9591d3c329cd9a5ea2d

I would also recommend using the Query Monitor Plugin you can load that and view the scripts and styles loaded on a page from the Admin Bar:

Query Monitor – The developer tools panel for WordPress

Let me know if you have any follow up questions.

Thanks

[fuyutski]

Hi Brian,

Thanks for that — it’s fixed most of the problems (including the widget).

However, there’s still a few issues on the actual Events page — although it’s looking much better!

You might notice on http://thinkingofgod.org/events/ that the filter bar doesn’t collapse, the selection of the bar still doesn’t look completely normal, the next/previous pages don’t move the page, and the filter bar doesn’t show the cost slider. Interestingly, if you choose a filter and click submit then most of the page works. I’m guessing it’s a js issue — but I’m not sure which one. I’ve added the following to the exception list:

CSS:
/wp-content/plugins/upme/css/font-awesome.min.css
/wp-content/plugins/upme/css/upme.css
/wp-content/plugins/upme/styles/default.css
/wp-content/plugins/upme/css/upme-responsive.css
/wp-content/plugins/events-calendar-pro/resources/tribe-events-pro-full.min.css
/wp-content/plugins/events-calendar-pro/resources/tribe-events-pro-full-mobile.min.css
/wp-content/plugins/events-calendar-pro/resources/widget-calendar-full.css
/wp-content/plugins/the-events-calendar-filterbar/resources/filter-view.css
/wp-content/plugins/the-events-calendar/vendor/bootstrap-datepicker/css/datepicker.css
/wp-content/plugins/the-events-calendar/resources/tribe-events-full-mobile.min.css
/wp-content/plugins/the-events-calendar/resources/tribe-events-full.min.css
/wp-content/plugins/the-events-calendar/vendor/chosen/public/chosen.min.css
/wp-content/plugins/the-events-calendar/vendor/jquery/smoothness/jquery-ui-1.8.23.custom.css

JS:
/wp-content/plugins/upme/admin/js/tinymce_language_strings.js
/wp-content/themes/Newspaper/js/min/site.min.js
/wp-content/plugins/events-calendar-pro/resources/widget-calendar.js
/wp-content/plugins/upme/js/upme-custom.js
/wp-content/plugins/the-events-calendar-filterbar/resources/filter-scripts.js
/wp-content/plugins/the-events-calendar/vendor/jquery-placeholder/jquery.placeholder.min.js
/wp-content/plugins/the-events-calendar/resources/tribe-events-bar.min.js
/wp-content/plugins/the-events-calendar/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js
/wp-content/plugins/the-events-calendar/resources/tribe-events.min.js
/wp-content/plugins/the-events-calendar/vendor/chosen/public/chosen.jquery.min.js
/wp-content/plugins/the-events-calendar/vendor/jquery-resize/jquery.ba-resize.min.js
/wp-content/plugins/events-calendar-pro/resources/tribe-events-pro.min.js
/wp-content/plugins/events-calendar-pro/resources/tribe-events-ajax-maps.min.js
/wp-content/plugins/the-events-calendar/resources/tribe-events-ajax-calendar.min.js

Thanks for the help thus far! 🙂

[Brian]

I am seeing these errors:

ReferenceError: tribe_ev is not defined
http://990006166.r.dynomeshcdn.net/wp-content/cache/min/1/aaab522c693aa35805ac2873584df018.js
Line 1

TypeError: this.ajaxForm is not a function
http://990006166.r.dynomeshcdn.net/wp-content/cache/min/1/9a58651b1bb7b985f66cb8b963656f33.js
Line 2

So the cache is not loading scripts in the right order causing these two errors.

Not sure how much we are going to be able to help out.

You may have to keep playing around with a combination of scripts and order to get it right.

[fuyutski]

Oddly, it seems to work now!

Thanks for your help Brian. 🙂

[Brian]

Great, glad it is working, I am going to go ahead and close this ticket, but if you need help on this or something else please post a new ticket.

Thanks!

[Author]

Posts