Read the statement by Michael Teeuw here.
Solved Problem reloading data
-
@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.
-
@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 stylethen 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…
-
@sdetweil Thank you, I will try to work it out!
-
@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.
-
@matahideveugle I understand…
can you share your GitHub repo link, via email same userid at gmail
-
@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 !
-
@matahideveugle cool. glad u got it