Fixing Elementor Popups with JavaScript

Elementor is a free WordPress plugin that enhances your website to allow graphical drag and drop editing of websites and it's free.

It is full of nice and helpful snippets with an especially powerful one being the ability add in Popups.  This can give your website focus areas and direct flows in a slick manner and it works as long as you stay within the confines of hooking this snippet up to this defined enhancement etc, but as soon as you try to do something a little bit off the prescribed flow things get painful and hard to do.

First the popup system seems to always inject a dynamic script element as a directive from Elementor.  Now this probably is a good decision as if you dropped a html tag or script code it would need to load the contents or perform the action to ensure it shows even if a popup is destroyed from the Document Object Model (DOM)

However if you are embedding third party content (in this case an iframe and yes I know iframes are passe, but they still allow for mix and matching content embedded and shared by link like the original World Wide Web was intended) it will render the contents and inject the script each time except the script here that loads the iframe is intended to be run once on the webpage so this causes multiple iframes to load and render in the popup.  Note that the task here was that 2 separate iframes are loading into the same popup from different sources (strange occurrence, but what was desired)

What is the solution?

• Load the widget script with a onetime page load check
• Create a general elementor popup that contains a left div and right div (1 div each to hold the each separate iframes content)
• Create a click handler that binds to each location on the original page to start the JavaScript call and load the appropriate widget back to the left or right divs and populate the contents

<script>
	window.addEventListener('load',() => {
		if(jQuery("script[src='https://target_script_loading_url']").length == 0) {
			let dynamicWidget = document.createElement("script");
			dynamicWidget.setAttribute("src", "https://target_script_loading_url");
			dynamicWidget.setAttribute("type", "text/javascript");
			document.body.appendChild(dynamicWidget);

			dynamicWidget.addEventListener("load", () => {
				console.log("Widget loaded")
			});
			dynamicWidget.addEventListener("error", (ev) => {
				console.log("Error on loading dynamic widget", ev);
			});		
			return;		
		}
	});

	window.onclick = e => {
		let triggerElement = e.target.closest("a");
		if (triggerElement != null) {
			if (triggerElement.id == "id1") {
				let iframe_id1 = "id1";
				let left_popup_id = jQuery("#listing_popup_left").get().pop();
				let iframe_widget_id1 = "x1";
				window.<object_id>.load_javascript_fn(left_popup_id, iframe_id1, iframe_widget_id1);

				let right_popup_id = jQuery("#listing_popup_right").get().pop();
				let iframe_widget_id2 = "x2";
				window.<object_id>.load_javascript_fn(right_popup_id, iframe_id1, iframe_widget_id2);
			}
			if (triggerElement.id == "id2") {
				...
			}
			if (triggerElement.id == "id3") {
				...
			}		
		}
	};
</script>

And it works finally