Passing an object as a parameter

[Claus Mygind]

In the following code I create an array with an object that has 3 properties.

I then dynamically create a table wherein one of the cells I create a button.

The button has several parameters, which it is suppose to send with the onclick event handler. One of the parameters is the array (see line 34 of code).

However when I click on the rendered button, I get this error message that says: "missing ] after element list".

function mapNlistJobs(cPoint, cJob, cPrjctName, cPrjctAddr, cDept, cTitle, cLat, cLon)
{
	var cArray = new Array();
	cArray[cArray.length] = {job:cTitle, pName:cPrjctName, pAddr:cPrjctAddr};

	var cText  = "Job # "+cJob+"<br />"+cPrjctName+"<br />"+cPrjctAddr;
	var tr, td;

   	tbody = document.getElementById("closeJobs");

	//add job row
	tr = tbody.insertRow(tbody.rows.length);

	//make new cell
	td = tr.insertCell(tr.cells.length);

	//fill in content
	td.innerHTML =	cJob;

	//make new cell
	td = tr.insertCell(tr.cells.length);

	//fill in content
	td.innerHTML =	cPrjctName;

	//make new cell
	td = tr.insertCell(tr.cells.length);

//could not use this option because I am already using ' and " as delimiters
//	td.innerHTML =	'<input type="button" value="Center" class="InputText" onClick="centerOnThis( '+cLat+', '+cLon+', '+cTitle+', '+cPrjctName+', '+cPrjctAddr+' );"/>'


//here is where I am trying to include the array as a parameter.
	td.innerHTML =	'<input type="button" value="Center" class="InputText" onClick="centerOnThis( '+cLat+', '+cLon+', '+cArray+' );"/>'

}

[Claus Mygind]

In the following code I create an array with an object that has 3 properties.

I then dynamically create a table wherein one of the cells I create a button.

The button has several parameters, which it is suppose to send with the onclick event handler. One of the parameters is the array (see line 34 of code).

However when I click on the rendered button, I get this error message that says: "missing ] after element list".

function mapNlistJobs(cPoint, cJob, cPrjctName, cPrjctAddr, cDept, cTitle, cLat, cLon)
{
	var cArray = new Array();
	cArray[cArray.length] = {job:cTitle, pName:cPrjctName, pAddr:cPrjctAddr};

	var cText  = "Job # "+cJob+"<br />"+cPrjctName+"<br />"+cPrjctAddr;
	var tr, td;

   	tbody = document.getElementById("closeJobs");

	//add job row
	tr = tbody.insertRow(tbody.rows.length);

	//make new cell
	td = tr.insertCell(tr.cells.length);

	//fill in content
	td.innerHTML =	cJob;

	//make new cell
	td = tr.insertCell(tr.cells.length);

	//fill in content
	td.innerHTML =	cPrjctName;

	//make new cell
	td = tr.insertCell(tr.cells.length);

//could not use this option because I am already using ' and " as delimiters
//	td.innerHTML =	'<input type="button" value="Center" class="InputText" onClick="centerOnThis( '+cLat+', '+cLon+', '+cTitle+', '+cPrjctName+', '+cPrjctAddr+' );"/>'


//here is where I am trying to include the array as a parameter.
	td.innerHTML =	'<input type="button" value="Center" class="InputText" onClick="centerOnThis( '+cLat+', '+cLon+', '+cArray+' );"/>'

}

I decided to solve my problem by using a global array and just track the array element in the button

var exchangeArray = new Array();

function mapNlistJobs(cPoint, cJob, cPrjctName, cPrjctAddr, cDept, cTitle, cLat, cLon)
{
	exchangeArray[exchangeArray.length] = {job:cTitle, pName:cPrjctName, pAddr:cPrjctAddr};
	var aCnt =	exchangeArray.length-1
.
.
.
class="InputText" onClick="centerOnThis( '+cLat+', '+cLon+', '+aCnt+' );"/>'
}

function centerOnThis(cLat, cLon, cCnt)
{

	var cPoint = new google.maps.LatLng(cLat,cLon);
	map.setCenter(cPoint, 17);

	var j = exchangeArray[cCnt].job
	var p = exchangeArray[cCnt].pName
	var a = exchangeArray[cCnt].pAddr
	map.openInfoWindowHtml(map.getCenter(), "Job # <a href='/SXYZ/job.exe?SEARCH="+j+' target="_blank'+'">'+j+"</a><br />"+p+"<br />"+a);
}

[Dormilich]

a) in IE .innerHTML is read-only for tables
b) event listeners are way more comfortable than event attributes.

[Claus Mygind]

a) in IE .innerHTML is read-only for tables
b) event listeners are way more comfortable than event attributes.

Thank you for your answer.

a) My user base is strictly FireFox

b) I have only started to dabble in event listeners and do not have a thorough understanding of them as yet. But I do agree if I could move to that level of proto-typing my code it would be more global.

[Dormilich]

Event Listeners as such have barely anything to do with prototyping. however, some pros and cons of Event Listeners:
pros

• they allow you to add/remove functions to an Event anytime, anywhere
• they allow you to execute functions in the capturing or bubbling phase of the Event Flow
• your HTML becomes cleaner (separation of structure and behaviour)

cons

• IE does not implement the DOM-level-2 EventTarget Interface (= addEventListene r), therefore you require a workaround (readily available, just google or ask me).
• IE’s implementation sucks, don’t use it. (you really do yourself a favour)
• most JavaScript frameworks don’t support event capturing

[Claus Mygind]

Event Listeners as such have barely anything to do with prototyping. however, some pros and cons of Event Listeners:
pros

• they allow you to add/remove functions to an Event anytime, anywhere
• they allow you to execute functions in the capturing or bubbling phase of the Event Flow
• your HTML becomes cleaner (separation of structure and behaviour)

cons

• IE does not implement the DOM-level-2 EventTarget Interface (= addEventListene r), therefore you require a workaround (readily available, just google or ask me).
• IE’s implementation sucks, don’t use it. (you really do yourself a favour)
• most JavaScript frameworks don’t support event capturing

Thanks for your clarification. I was really on board with you until the very last comment in "cons"

most JavaScript frameworks don’t support event capturing

Not sure how that would impact the javaScript I am writing?

[Dormilich]

Not sure how that would impact the javaScript I am writing?

as always, it depends on the actual script. there are cases, where event capturing is the better (and sometimes only) choice.

as for an example (an image slider game), there is a table created, where every cell has a click handler. if the game is won, all click actions have to be suppressed. either you stop the click event before it reaches the table cells (which can only be done in the capturing phase, since <td> is already the target) or you remove all handlers or remove/replace the table.