Problem reloading data

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

[sdetweil]

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

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

[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…

[matahideveugle]

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

[matahideveugle]

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

[sdetweil]

@matahideveugle I understand…

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

[matahideveugle]

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

[sdetweil]

@matahideveugle cool. glad u got it