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.

    Problem reloading data

    Scheduled Pinned Locked Moved Solved Troubleshooting
    9 Posts 2 Posters 326 Views 2 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.
    • M Offline
      matahideveugle
      last edited by matahideveugle

      Hello,
      I wrote a module that retrieves data from a json file hosted online.
      The file contains a static youtube video ID and some non static data.
      My module displays the video through an iframe and the non static data is displayed below the video.
      I call the updateDom function every 20 seconds to update the non static data.
      However, doing this also reloads the video which is supposed to keep playing while the new data gets replaced.
      Is there any way to do that?

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

        @matahideveugle so, when getDom() gets called, you don’t HAVE to replace EVERYTHING

        so, in my cases where I have update, I create and save this wrapper div, and the important content (your iframe)
        and just change the static data (delete/add)

        and then return the wrapper as always…

        then when nothing is showing, you clean out the wrapper and wait for next cycle…

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        M 1 Reply Last reply Reply Quote 0
        • M Offline
          matahideveugle @sdetweil
          last edited by matahideveugle

          @sdetweil
          How and where do you save the wrapper div?
          Also, do I return a wrapper that contains only the new data?
          Here is my getDom :

          	getDom: function () {
          		if (this.jsonData.rapport.length < 1){
          			const wrapperEmpty = document.createElement("div");
          			return wrapperEmpty;
          		}
          		const wrapper = document.createElement("div");
          		wrapper.className = ("container");
          		
          		const title = document.createElement("div");
          		title.className = ("title");
          		title.innerHTML = this.jsonData.titreSession;
          		
          		
          		const video = document.createElement("div");
          		video.className = ("video");
          		var params = "";
          		this.config.video_id = this.jsonData.videoID;
          		var videoList = "";
          		if (this.config.video_list && this.config.video_list.length > 0) {
          			videoList = "&playlist=";
          			for (var i = 0; i < this.config.video_list.length; i++) {
          				videoList += this.config.video_list[i];
          				if (i + 1 < this.config.video_list.length)
          					videoList += ",";
          			}
          		}
          		params += (this.config.autoplay) ? "autoplay=1" : "autoplay=0";
          		params += (this.config.cc_load_policy) ? "&cc_load_policy=1" : "&cc_load_policy=0";
          		params += (typeof this.config.color !== "undefined" && this.config.color != "red")? "&color=" + this.config.color:"";
          		params += (this.config.controls)? "&controls=1":"&controls=0";
          		params += (this.config.disablekb)? "&disablekb=1":"";
          		params += (this.config.fs)? "":"&fs=0";
          		params += (videoList != "" && (typeof this.config.playlist === "undefined" || this.config.playlist == "")) ? videoList : "&playlist=" + this.config.video_id; // required playlist to loopable
          		params += (this.config.loop) ? "&loop=1" : "";
          		params += (this.config.modestbranding) ? "&modestbranding=1" : "";
          		params += (this.config.rel)? "&rel=1": "&rel=0";
          		params += (this.config.showinfo)? "&showinfo=1": "&showinfo=0";
          
          		var videoId = this.config.video_id +"?version=3";
          		if (typeof this.config.playlist !== "undefined" && this.config.playlist != "")
          			videoId = "playlist?list=" + this.config.playlist + "&";
          
          		video.innerHTML = "<iframe width=\"" + this.config.width +"\" height=\"" + this.config.height + "\" src=\"https://www.youtube.com/embed/" + videoId + "&"+ params +"\" frameborder=\"0\" allowfullscreen></iframe>";
          	
          	
          		const name = document.createElement("div");
          		name.className = ("name");
          		name.innerHTML = this.jsonData.intervenant;
          		
          		const description1 = document.createElement("div");
          		description1.className = ("description1");
          		description1.innerHTML = this.jsonData.descriptionIntervention;
          		
          		const numDossier = document.createElement("div");
          		numDossier.className = ("numDossier");
          		const description2 = document.createElement("div");
          		description2.className = ("description2");
          		var temp = 0;
          		for (let i=0; i < this.jsonData.rapport.length; i++) {
          			if (this.jsonData.rapport[i].statut === "en cours") {
          				temp = temp + 1;
          				numDossier.innerHTML = "Dossier : " + this.jsonData.rapport[i].num;
          				description2.innerHTML = this.jsonData.rapport[i].libelle;
          			}
          		}
          		if (temp > 0){
          				document.querySelector(".calendar").style.display = 'none';
          		} else {
          			document.querySelector(".APFEventBoard").style.display = 'none';
          		}
          		const ordres = document.createElement("div");
          		ordres.className = ("ordres");
          		const ordre = document.createElement("div");
          		for (let i=0; i < this.jsonData.rapport.length; i++) {
          			window['ordre'+i] = document.createElement("div");
          			window['ordre'+i].innerHTML = "Rapport n°" + this.jsonData.rapport[i].num;
          			ordres.appendChild(window['ordre'+i]);
          			if (this.jsonData.rapport[i].statut === "en cours") {
          				window['ordre'+i].className = "current";
          			}
          		}
          		
          		wrapper.appendChild(title);
          		wrapper.appendChild(video);
          		wrapper.appendChild(name);
          		wrapper.appendChild(description1);
          		wrapper.appendChild(numDossier);
          		wrapper.appendChild(description2);
          		wrapper.appendChild(ordres);
          		
          		return wrapper;
          	}
          
          

          Essentially, the only field that never changes is the video one.

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

            @matahideveugle where to save? in a module instance variable

            defaults:{

            },
            wrapper: null,
            …

            if (this.wrapper == null){
            create it
            initialize it set classes etc)
            }
            create and append elements for each item, (but empty, no inner.html or inner text)
            maybe display:none for style

            then when need to change
            create and append iframe ,

            find elements for text , altho you could have saved them too , I would save them, then don’t have to lookup and dont impact browser performance,
            set inner…

            when its time to display iframe/insert(addAfter/Before), add source, make visible …

            all kinds of approaches…

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            M 2 Replies Last reply Reply Quote 0
            • M Offline
              matahideveugle @sdetweil
              last edited by

              @sdetweil Thank you, I will try to work it out!

              1 Reply Last reply Reply Quote 0
              • M Offline
                matahideveugle @sdetweil
                last edited by

                @sdetweil I’m not sure if I did something wrong but it still seems like the entire page is reloaded even though I saved the div with the video. I don’t know if I explained well but I need the video to stay and play the entire time.

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

                  @matahideveugle I understand…

                  can you share your GitHub repo link, via email same userid at gmail

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  M 1 Reply Last reply Reply Quote 0
                  • M Offline
                    matahideveugle @sdetweil
                    last edited by

                    @sdetweil Hello, I resolved the problem by using Ajax. I had tried using Ajax and JQuery but these 2 weren’t working until I found out I had to download the source and add them to the script section. Thank you for helping !

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

                      @matahideveugle cool. glad u got it

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1 / 1
                      • 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