Help with inserting a script into a <div> element

AdamBD

Hi!

I am working to create a custom module for the moovit transit service. Moovit has an out-of-the-box widget, which is a simple div with a script in it. The issue I am having is that the widget they provide is something thats supposed to be placed in the HTML directly:

<div class="mv-wtp" data-metro="1" data-lang="en" style="width:900px; height:900px;" data-from="hakerem+4+tel" data-to="sarona" >
   
  <script>(function(d, s, id) {

      let js, fjs = d.getElementsByTagName(s)[0];

      js = d.createElement(s); js.id = id;

      js.src = "https://widgets.moovit.com/wtp/en";

      fjs.parentNode.insertBefore(js, fjs);

  }(document, 'script', 'moovit-jsw'));

</script>
</div>

I dont know how to get a script to run if I am creating a div element from the document object in the module, for example:

getDom: function() {
  var element = document.createElement("div")
  element.className = "myContent"
  element.innerHTML = "Hello, World! "
  return element
},

I understand that if you set innerHTML to be a script it will never evaluate in the browser.

Anyone have suggestions on how to do this?

@adambd
There are several ways to insert script after loading. Here are examples;

//insert before other scripts
var tag = document.createElement("script")
tag.src = "EXTERNAL_SCRIPT_URL"
var firstScriptTag = document.getElementsByTagName("script")[0]
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)

//insert after other scripts
var tag = document.createElement("script");
tag.src = "EXTERNAL_SCRIPT_URL";
document.getElementsByTagName("head")[0].appendChild(tag);

Or, You can make a HTML file which contains the target widget, and load it with iFrame.

AdamBD

Hi Sean, thanks for answering!

tag.src = “EXTERNAL_SCRIPT_URL”;

What should this point to? A local file on my machine?

sdetweil

@adambd EXTERNAL url = “https://some_server_com/etc/whatever.js”

AdamBD

@sdetweil Hey sean, But then I need to have a ‘server’ running to pull this in. I would prefer just to keep it in another node file in the project. any thoughts on how to do that?

@adambd
How about trying this?

sdetweil

@adambd if you look at the MMM_ImagedPhotos and MMM_ImageSlideshow modules, you will see they map a url for the express server running in MM

	extraRoutes: function() {
		var self = this;

		this.expressApp.get("/MMM-ImagesPhotos/photos", function(req, res) {
			self.getPhotosImages(req, res);
		});

		this.expressApp.use("/MMM-ImagesPhotos/photo", express.static(self.path_images));
	},

	// return photos-images by response in JSON format.
	getPhotosImages: function(req, res) {
		directoryImages = this.path_images;
		var imagesPhotos = this.getImages(this.getFiles(directoryImages)).map(function (img) {
			return {url: "/MMM-ImagesPhotos/photo/" + img};
		})
		res.send(imagesPhotos);
	},

justjim1220

@adambd

element.innerHTML =  `<div>     ENTER HTML CODE    </div>`

you have to have the ` before and after the div indicators

the key to the left of the 1 key

Mykle1

@sean

You could not have made it any easier. Fantastic idea, sean!

justjim1220

@sean

The only problem with this widget module… It doesn’t allow clickable links to be clicked…
Otherwise, It’s pretty cool!