MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

Help with inserting a script into a <div> element



  • 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>
       
      
    </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?


  • Module Developer

    @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.



  • Hi Sean, thanks for answering!

    tag.src = “EXTERNAL_SCRIPT_URL”;

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



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



  • @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?


  • Module Developer

    @adambd
    How about trying this?



  • @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);
    	},
    
    

  • Module Developer

    @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


  • Module Developer

    @sean

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


  • Module Developer

    @sean

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