[Resolved] conflict with Featured Image By Url jquery when views use ajax for page transiti

[Author]

Posts

[brandonR-4]

hidden link

Conflict with Featured Image By Url jquery when views use ajax for page transitions

[brandonR-4]

hidden link

[brandonR-4]

"So just contact the support and report it's removing jQuery. Say that other plugins need it."

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

It seems that the plugin that you're using for the popup video, initializes its scripts when the page loads. But when the view's results have been updated through AJAX (i.e. without the page refresh/reload), those scripts are not re-initialized.

To troubleshoot this further and suggest the next steps, I'll need to see exactly how these elements are set up in the admin area.

Can you please share the temporary admin login details, in reply to this message?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

[brandonR-4]

Hi Brandon

Thank you for the video,

I don’t think the jquery error is related to the problem, I also could fix it by following the instruction shared in the initial response, so you no longer have both jquery not defined problem.

About Ajax, as we are not familiar with the toolset and the FIFU plugin there isn’t a different way to troubleshoot other than some conflict tests, but first, let me explain how Ajax is supposed to work.

When we call something using Ajax we need to use JS to make the Ajax request to admin-ajax.php URL and register a custom Ajax event, full details are located here hidden link the main issue with Ajax is related to dependences, for example, if in the initial page refresh you don’t need to use the video as your feature image the developer needs to make a validation in the Ajax request to ensure all necessary scripts are enqueued and it is what I believe is happening here.

From what I understood you are using the Featured Image from URL (FIFU) Premium plugin to generate featured images correct?

If so, the problem seems that the plugin fails on Ajax events, when the initial reload happens there is no video so there is no need to enqueue the video script but then Ajax happens the video JS tries to get triggered but the function doesn’t exist because the code file that has the function wasn’t enqueued.

You can validate the above by adding the video on page one and see if it will work, if so, the best solution is to contact the plugin developer and verify which JS code is required, then report the problem but as workaround, you can try to enqueue that JS file manually, the plugin developer would be able to give more information.

Let us know the result you got.
Best Regards
Patrick Freitas

[brandonR-4]

From Featured Image By Url developer, Marcel: "So just contact the support and report it's removing jQuery. Say that other plugins need it."

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for waiting, as I performed some tests and research around the challenge that you're having on your website.

I found the script that initiates the lightbox from the 'Featured Image from URL (FIFU) Premium' plugin in its file:
/wp-content/plugins/fifu-premium/includes/html/js/video.js

Toolset does offer an event 'js_event_wpv_pagination_completed' that can be used to execute some script after the AJAX pagination operation has been completed.

Based on this, you can include the following script in your view's "JS Editor" to reinstate the lightbox script:

jQuery( document ).on( 'js_event_wpv_pagination_completed ', function( $ ) {
	if(!fifuVideoVars.fifu_should_wait_ajax)
		replaceVideoThumb($);
		jQuery(".pswp__counter").bind("DOMSubtreeModified",function($){
			replaceImageDlg($);
		});

		setTimeout(function(){
			fifu_fix_youtube_thumbnails();
		},2000);
		setTimeout(function(){
			wrapper=jQuery('div.fifu_wrapper')[0];
			if(wrapper){
				height=wrapper.clientHeight;
				if(fifuVideoVars.fifu_is_divi_active){
					if(wrapper.clientHeight>wrapper.clientWidth){
						height/=2;jQuery('iframe.fifu_iframe').parent().attr('style','');
					}
				}
			}
			if(fifuVideoVars.fifu_woocommerce)
				fifu_fix_zoom();if(fifuVideoVars.fifu_is_divi_active)
				fifu_fix_divi();if(fifuVideoVars.fifu_is_elementor_active){
					fifu_fix_elementor();
					jQuery('article.elementor-portfolio-item').on('mouseenter',function($){
						play=jQuery(this).find('a div div.fifu_play');
						if(play.length==1)
							play.mouseenter();
					});
				}

				if(fifuVideoVars.fifu_is_play_type_lightbox){
					jQuery("div.woocommerce-product-gallery__image").find("div.fifu_play.start").on("click",function($){
						jQuery.fancybox.open([{src:jQuery(this).find('a').attr('href')}]);
					});
				}},200);
				if(fifuVideoVars.fifu_essential_grid_active){
					fifu_fix_essential_grid();
				}
});

But before testing this, please make sure to temporarily disable all cache, optimization, and resource management plugins, so that its effect can be seen without any interference.

I hope this helps and please let me know how it goes.