Fixing D7 Bug: Block caching within views breaks JS

Question

I have a number of block on pages throughout my site which use views. Within these blocks I have slideshows(flexslider) or use masonry to produce a dynamic layout. If I enable block caching the JS within these blocks does not function correctly. Disabling caching on these blocks restores the functionality.

I am hoping to fix this problem and have a cached blocked with it's JS functioning normally.

I have found some information on this exact issue for the flexslider module (https://drupal.org/node/1873970) but it is not a complete fix. It states that the issue is within views and points to an issue there: https://drupal.org/node/1460766 . There is also the SE Q&A at https://stackoverflow.com/questions/9788138/jquery-flexslider-not-loading-verytime which provides some insight to the issue when flexslide is used as stand alone rather than with views.

There are dozens of issue, especially within Views Slideshow (probably because it is one of the most popular Views Plugins) which make reference to this issue all the way back to 2009 but the are no actual fixes.

It is also worth noting that the page can be cached without JS breaking. It is only when the block is cached that things go wrong. In my current implementation cached page but not block adds ~1.5 seconds in load time.

With Views and JS being so widespread and caching being as important as it is I am surprised this issue has not been solved, or maybe I am misunderstanding the issue.

Has anyone encountered this issue and found a fix for it?

I welcome any comments or feedback that would improve this question or help move towards a solution for this widespread issue.

Answer 1

This is indeed an annoying bug.

I'm still looking for a permanent solution as well. Meanwhile, I have been able to mitigate the effects of this bug by doing the following:

1. Install and enable Cache Expiration module
2. Setup the expiration setting of your content types or taxonomy terms so that cache for the problematic pages is expired on insert/edit/delete (adjust to your needs)
3. Implement hooks: hook_entity_insert, hook_entity_update, hook_entity_delete and manually delete panels / views / block cache of the problematic blocks/content.
   For example: cache_clear_all('my_view:my_display', 'cache_views_data', TRUE);

This is obviously far from perfect, since it forces regeneration of cache at every update but it does help in displaying content properly.