Problem reloading data

[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