MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Help with inserting a script into a <div> element

    Scheduled Pinned Locked Moved Development
    11 Posts 5 Posters 2.8k Views 5 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A Offline
      AdamBD
      last edited by

      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?

      ? justjim1220J 2 Replies Last reply Reply Quote 0
      • ? Offline
        A Former User @AdamBD
        last edited by

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

        1 Reply Last reply Reply Quote 0
        • A Offline
          AdamBD
          last edited by

          Hi Sean, thanks for answering!

          tag.src = “EXTERNAL_SCRIPT_URL”;

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

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @AdamBD
            last edited by

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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            A 1 Reply Last reply Reply Quote 0
            • A Offline
              AdamBD @sdetweil
              last edited by

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

              ? S 2 Replies Last reply Reply Quote 0
              • ? Offline
                A Former User @AdamBD
                last edited by

                @adambd
                How about trying this?
                [card:eouia/MMM-Widget]

                Mykle1M justjim1220J 2 Replies Last reply Reply Quote 2
                • S Offline
                  sdetweil @AdamBD
                  last edited by

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

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • justjim1220J Offline
                    justjim1220 Module Developer @AdamBD
                    last edited by

                    @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

                    "Life's Too Short To Dance With Ugly People"
                    Jim Hallock - 1995

                    1 Reply Last reply Reply Quote 0
                    • Mykle1M Offline
                      Mykle1 Project Sponsor Module Developer @Guest
                      last edited by

                      @sean

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

                      Create a working config
                      How to add modules

                      1 Reply Last reply Reply Quote 0
                      • justjim1220J Offline
                        justjim1220 Module Developer @Guest
                        last edited by

                        @sean

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

                        "Life's Too Short To Dance With Ugly People"
                        Jim Hallock - 1995

                        Mykle1M 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy