read csv-data and put it in an array

[sdetweil]

@Perlchamp cool… i did the age correction

[Perlchamp]

cool too :-) , so you still burn, too :-))

[Perlchamp]

hi sam, i know that the code of table is working (in testmodule). but can’t get objects in there. did look in dev-widow, but looks fine. in the terminal-window i see that objects have been handed over (node to module.js). this is the code for the body of the table:

	    // create TBODY section with day names
	    var tBody = document.createElement("tBody");
	    tBody.className = "tbody";
	    tBody.id = "birthday-tbody";
	    
	    for(var birthday of Object.keys(this.active_birthdays)) {
		for(var person of this.active_birthdays[birthday]) {
				
		    //var m = document.createElement('div');
				
		    // create looped row section
		    var bodyTR = document.createElement("tr");
		    bodyTR.className = "tr-body";
		    bodyTR.id = "birthday-tr-body";

		    var bodyTDimage = document.createElement("td");
		    bodyTDimage.className = "td-image";
		    bodyTDimage.id = "birthday-td-image";
		    bodyTDimage.innerHTML = birthday;

		    var bodyTD = document.createElement("td");
		    bodyTD.className = "td-body";
		    bodyTD.id = "birthday-td-body";
		    bodyTD.innerHTML = person.name + "<span class=\"age-span\">" + person.age + "</span>";
		    				
		    //m.innerText = birthday + ' ' + person.name + ' age=' + person.age;
		    //wrapper.appendChild(m);
		    
		    bodyTR.appendChild(bodyTDimage);
		    bodyTR.appendChild(bodyTD);
		    tBody.appendChild(bodyTR);
		    wrapper.appendChild(tBody);
		    
		}
	    }

what did i make wrong ?

[Perlchamp]

@Perlchamp said in read csv-data and put it in an array:

bodyTD.innerHTML = person.name + “” + person.age + “”;

should be:
bodyTD.innerHTML = person.name + span class = … + person.age + /span;

can’t send html tags here ? how i have to escape them here ?

[sdetweil]

@Perlchamp cannot escape tags here, long time complaint

[Perlchamp]

did it !
this.loaded = true; was wrong placed …

[Perlchamp]

but this does not work yet:

		    var bodyTDimage = document.createElement("td");
		    bodyTDimage.className = "td-image";
		    bodyTDimage.id = "birthday-td-image";
		    if (birthday.charAt(0) === "0") {
			birthday = birthday.replace("0","");
			birthday = birthday.substring(0,1);
		    }
		    bodyTDimage.innerHTML = birthday.substring(0,2);

the value will not displayed, but i will find a way. my code yet is far away from a smart code :-))

[Perlchamp]

this is the status at the moment :

[sdetweil]

@Perlchamp cool… do you want ages aligned?

[Perlchamp]

yes, of course, sir …

[sdetweil]

@Perlchamp need to specify width of td

By default, a browser will adjust table columns to fit the contents of the table. However, if you want to control the width of each column, you can do so by adjusting the width of each or of a single row.

if you had th, then you could see the length of the names as they go by, and then adjust the th width before sending the content to MM…

[Perlchamp]

width:27px; is placed in css
but this:

//bodyTDimage.id = "birthday-td-image";

works. i really have to write html-text in the module-file ?

[sdetweil]

@Perlchamp eh? commenting out a line?

have a th is the same as what you have document.createElement(“th”)

[Perlchamp]

wrong line, moment:

//bodyTDimage.className = "td-image";

this works, but unformatted, of course

i don’t like things like:
innerHTLM = tags, tags, tags …

[sdetweil]

@Perlchamp eh? where is that?

[Perlchamp]

getDom:

    getDom: function() {
	var self = this;
	var wrapper = document.createElement("div");
		
	// tell MM to call and get our content
	Log.log(JSON.stringify(this.active_birthdays))

	if ((moment() > this.midnight) || (!this.loaded)) {
	    var month = moment().month();
	    var year = moment().year();
	    var monthName = moment().format("MMMM");
	    var monthLength = moment().daysInMonth();

	    // create table
	    var wrapper = document.createElement("table");
	    wrapper.className = 'table'; 
	    wrapper.id = 'birthday-table';

	    // create header
	    var tHeader = document.createElement("thead");
	    tHeader.className = "thead";
	    tHeader.id = "birthday-thead";

	    var headerTR = document.createElement("tr");
	    headerTR.className = "tr-head";
	    headerTR.id = "birthday-tr-head";			    

	    var headerTH = document.createElement("th");
	    headerTH.colSpan = "2";
	    headerTH.scope = "col";
	    headerTH.className = "th-head";
	    headerTH.id = "birthday-th-head";
	    headerTH.innerHTML = " ";
	    
	    headerTR.appendChild(headerTH);
	    tHeader.appendChild(headerTR);
	    wrapper.appendChild(tHeader);
		    
	    // Create TFOOT section -- currently used for debugging only
	    var tFooter = document.createElement('tfoot');
	    tFooter.className = "tfoot";
	    tFooter.id = "birthday-tfoot";

	    var footerTR = document.createElement("tr");
	    footerTR.className = "tr-foot";
	    footerTR.id = "birthday-tr-foot";

	    var footerTD = document.createElement("td");
	    footerTD.colSpan ="2";
	    footerTD.className = "td-foot";
	    footerTD.id = "birthday-td-foot";
	    if (this.config.debugging) {
		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
	    }
	    else {
		footerTD.innerHTML = "&nbsp;";
	    }

	    footerTR.appendChild(footerTD);
	    tFooter.appendChild(footerTR);
	    wrapper.appendChild(tFooter);

	    // create TBODY section with day names
	    var tBody = document.createElement("tBody");
	    tBody.className = "tbody";
	    tBody.id = "birthday-tbody";
	    
	    for(var birthday of Object.keys(this.active_birthdays)) {
		for(var person of this.active_birthdays[birthday]) {
				
		    //var m = document.createElement('div');
				
		    // create looped row section
		    var bodyTR = document.createElement("tr");
		    bodyTR.className = "tr-body";
		    bodyTR.id = "birthday-tr-body";

		    var bodyTDimage = document.createElement("td");
		    //bodyTDimage.className = "td-image";
		    bodyTDimage.id = "birthday-td-image";
		    if (birthday.charAt(0) === "0") {
			birthday = birthday.replace("0","");
			birthday = birthday.substring(0,1);
		    }
		    bodyTDimage.innerText = birthday.substring(0,2);

		    var bodyTD = document.createElement("td");
		    bodyTD.className = "td-body";
		    bodyTD.id = "birthday-td-body";
		    bodyTD.innerHTML = person.name + "&nbsp;&nbsp;&nbsp;<span class=\"age-span\">" + person.age + "</span>";
		    				
		    //m.innerText = birthday + ' ' + person.name + ' age=' + person.age;
		    //wrapper.appendChild(m);
		    
		    bodyTR.appendChild(bodyTDimage);
		    bodyTR.appendChild(bodyTD);
		    tBody.appendChild(bodyTR);
		    wrapper.appendChild(tBody);
		    
		}
	    }

	    // pass the created content back to MM to add to DOM.
	    return wrapper;

	}
	
	this.loaded = true;

/*
			


//		var bodyAgeSpan = document.createElement("span");
//		bodyAgeSpan.className = "age-span";
//		bodyAgeSpan.id = "birthday-age-span";
//		bodyAgeSpan.innerHTML = "&nbsp;&nbsp;46";
//		bodyTD.appendChild(bodyAgeSpan);
		

	    }
*/	
    },

[sdetweil]

@Perlchamp fiddling with it here… technically you are supposed to have a text element as a child of the td

< table>
   < tr>
      < td> value < /td>

var n = document.createTextNode(value);

[sdetweil]

@Perlchamp

			    var bodyTR = document.createElement("tr");
			   // bodyTR.className = "tr-body";
			    bodyTR.id = "birthday-tr-body";
			    tBody.appendChild(bodyTR);		    

			    var bodyTDimage = document.createElement("td");
			   // bodyTDimage.className = "td-image";
			    bodyTDimage.id = "birthday-td-image";
			   // bodyTDimage.innerHTML = birthday;
			    bodyTR.appendChild(bodyTDimage);
			    bodyTDimage.appendChild(document.createTextNode(birthday));

			    var bodyTD = document.createElement("td");
			   // bodyTD.className = "td-body";
			    bodyTD.id = "birthday-td-body";
			   // bodyTD.innerTEXT = person.name ;
				bodyTD.appendChild(document.createTextNode(person.name));
			    bodyTR.appendChild(bodyTD);		
			     

				var ageTD = document.createElement("td");
			   // bodyTD.className = "td-body";
			    ageTD.id = "birthday-td-age";
			    //ageTD.innerTEXT = person.age ;	 
			    ageTD.appendChild(document.createTextNode(person.age)); 
			    bodyTR.appendChild(ageTD);		

and set the class for the text element

[Perlchamp]

you were too fast !!
to your information:
table needs a header (thead, tr, th) and a footer (tfoot, tr, td), and, of
course a boda (tbody, tr, td), my cose, where a put html-tags in the table and text without variable works fine.
but later, if i should dissapointed, i will try this.

[sdetweil]

@Perlchamp >where a put html-tags in the table

its exactly the same as writing the html

they don’t NEED a thead/tfoot, these are optional

you could create a big text string of the html < table>… < /table>
and then assign that text string to the wrapper div innerHTML.

same result…