Site icon Hip-Hop Website Design and Development

Prevent AJAX caching from plugin

I made some custom work on an existing plugin to extend its functionality in a specific way that would suit my needs… The work I made is transparent, meaning that of course I didn’t touch the plugin’s code… I found my way through the appropriate hook point to inject my code…

Anyway, while developing my own custom work, I had to temporarily add some alert()‘s to the basic .js file of the plugin to find what methods I should utilize for my work… So in order to make my life easier, I put my testsite in debug mode (define('SCRIPT_DEBUG', true); in wp-config.php) so that WordPress would load .js plugin files instead of the minified .min.js ones…

Everything went fine and I achieved what I was trying to implement. But when I deactivated debug mode from my testsite, I realized that my own work didn’t work correctly every time, but only 3-4 times out of 5 page refreshes… After some investigation, I realized that my work didn’t work when AJAX preloading of variation images returned a 304 response code instead of a 200…

After investigating the plugin’s code in .js I found this relevant part:

                this._element.defaultXHR = $.ajax({
                    headers: {
                        'Cache-Control': 'max-age=86400',
                        'Pragma': 'cache' //  backwards compatibility with HTTP/1.0 caches
                    },
                    cache: true,
                    url: wc_add_to_cart_variation_params.wc_ajax_url.toString().replace('%%endpoint%%', 'get_available_variation_images'),
                    type: 'GET',
                    data: {
                        product_id: this.product_id
                    },
                    success: function success(images) {
                        if (images) {
                            if (images.length > 1) {
                                _this8.imagePreload(images);
                            }
                            _this8._element.data('woo_variation_gallery_variation_images', images);
                            _this8._element.trigger('woo_variation_gallery_variation_images', [_this8, images]);
                        } else {
                            _this8._element.data('woo_variation_gallery_variation_images', []);
                            console.error('Variation Gallery variations images not available on variation id ' + _this8.product_id + '.');
                        }
                    }
                });

While in the minified .min.js it’s like this:

this._element.defaultXHR=i.ajax({headers:{"Cache-Control":"max-age=86400",Pragma:"cache"},cache:!0,url:wc_add_to_cart_variation_params.wc_ajax_url.toString().replace("%%endpoint%%","get_available_variation_images"),type:"GET",data:{product_id:this.product_id},success:function(i){i?(i.length>1&&t.imagePreload(i),t._element.data("woo_variation_gallery_variation_images",i),t._element.trigger("woo_variation_gallery_variation_images",[t,i])):t._element.data("woo_variation_gallery_variation_images",[])}})

Generally they look similar, meaning that in theory they both use cache, but in practice in debug mode (when .js was used) my own work worked everytime, while when not in debug mode (when .min.js was used) my work only worked only some of the times…

So I suspect that somehow cache settings aren’t honored by WordPress when the site is in debug mode? ( don’t know what else to think of… Also, if my suspicion is correct, is there an appropriate hook point to attach to in order to attach a timestamp param to specific AJAX calls? For example, in the case of this plugin’s image preloading requests…

Any help will be very much appreciated! TIA.