469,294 Members | 1,701 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,294 developers. It's quick & easy.

Passing an object as a parameter

Claus Mygind
571 512MB
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".

Expand|Select|Wrap|Line Numbers
  1. function mapNlistJobs(cPoint, cJob, cPrjctName, cPrjctAddr, cDept, cTitle, cLat, cLon)
  2. {
  3.     var cArray = new Array();
  4.     cArray[cArray.length] = {job:cTitle, pName:cPrjctName, pAddr:cPrjctAddr};
  5.  
  6.     var cText  = "Job # "+cJob+"<br />"+cPrjctName+"<br />"+cPrjctAddr;
  7.     var tr, td;
  8.  
  9.        tbody = document.getElementById("closeJobs");
  10.  
  11.     //add job row
  12.     tr = tbody.insertRow(tbody.rows.length);
  13.  
  14.     //make new cell
  15.     td = tr.insertCell(tr.cells.length);
  16.  
  17.     //fill in content
  18.     td.innerHTML =    cJob;
  19.  
  20.     //make new cell
  21.     td = tr.insertCell(tr.cells.length);
  22.  
  23.     //fill in content
  24.     td.innerHTML =    cPrjctName;
  25.  
  26.     //make new cell
  27.     td = tr.insertCell(tr.cells.length);
  28.  
  29. //could not use this option because I am already using ' and " as delimiters
  30. //    td.innerHTML =    '<input type="button" value="Center" class="InputText" onClick="centerOnThis( '+cLat+', '+cLon+', '+cTitle+', '+cPrjctName+', '+cPrjctAddr+' );"/>'
  31.  
  32.  
  33. //here is where I am trying to include the array as a parameter.
  34.     td.innerHTML =    '<input type="button" value="Center" class="InputText" onClick="centerOnThis( '+cLat+', '+cLon+', '+cArray+' );"/>'
  35.  
  36. }
  37.  
May 21 '10 #1

✓ answered by Claus Mygind

@Claus Mygind
I decided to solve my problem by using a global array and just track the array element in the button
Expand|Select|Wrap|Line Numbers
  1. var exchangeArray = new Array();
  2.  
  3. function mapNlistJobs(cPoint, cJob, cPrjctName, cPrjctAddr, cDept, cTitle, cLat, cLon)
  4. {
  5.     exchangeArray[exchangeArray.length] = {job:cTitle, pName:cPrjctName, pAddr:cPrjctAddr};
  6.     var aCnt =    exchangeArray.length-1
  7. .
  8. .
  9. .
  10. class="InputText" onClick="centerOnThis( '+cLat+', '+cLon+', '+aCnt+' );"/>'
  11. }
  12.  
  13. function centerOnThis(cLat, cLon, cCnt)
  14. {
  15.  
  16.     var cPoint = new google.maps.LatLng(cLat,cLon);
  17.     map.setCenter(cPoint, 17);
  18.  
  19.     var j = exchangeArray[cCnt].job
  20.     var p = exchangeArray[cCnt].pName
  21.     var a = exchangeArray[cCnt].pAddr
  22.     map.openInfoWindowHtml(map.getCenter(), "Job # <a href='/SXYZ/job.exe?SEARCH="+j+' target="_blank'+'">'+j+"</a><br />"+p+"<br />"+a);
  23. }
  24.  
  25.  

6 1947
Claus Mygind
571 512MB
@Claus Mygind
I decided to solve my problem by using a global array and just track the array element in the button
Expand|Select|Wrap|Line Numbers
  1. var exchangeArray = new Array();
  2.  
  3. function mapNlistJobs(cPoint, cJob, cPrjctName, cPrjctAddr, cDept, cTitle, cLat, cLon)
  4. {
  5.     exchangeArray[exchangeArray.length] = {job:cTitle, pName:cPrjctName, pAddr:cPrjctAddr};
  6.     var aCnt =    exchangeArray.length-1
  7. .
  8. .
  9. .
  10. class="InputText" onClick="centerOnThis( '+cLat+', '+cLon+', '+aCnt+' );"/>'
  11. }
  12.  
  13. function centerOnThis(cLat, cLon, cCnt)
  14. {
  15.  
  16.     var cPoint = new google.maps.LatLng(cLat,cLon);
  17.     map.setCenter(cPoint, 17);
  18.  
  19.     var j = exchangeArray[cCnt].job
  20.     var p = exchangeArray[cCnt].pName
  21.     var a = exchangeArray[cCnt].pAddr
  22.     map.openInfoWindowHtml(map.getCenter(), "Job # <a href='/SXYZ/job.exe?SEARCH="+j+' target="_blank'+'">'+j+"</a><br />"+p+"<br />"+a);
  23. }
  24.  
  25.  
May 21 '10 #2
Dormilich
8,651 Expert Mod 8TB
a) in IE .innerHTML is read-only for tables
b) event listeners are way more comfortable than event attributes.
May 21 '10 #3
Claus Mygind
571 512MB
@Dormilich
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.
May 27 '10 #4
Dormilich
8,651 Expert Mod 8TB
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 (= addEventListener), 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
May 27 '10 #5
Claus Mygind
571 512MB
@Dormilich
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?
Jun 4 '10 #6
Dormilich
8,651 Expert Mod 8TB
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.
Jun 4 '10 #7

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Thomas Philips | last post: by
5 posts views Thread by Mike Carroll | last post: by
8 posts views Thread by =?Utf-8?B?UmF2aQ==?= | last post: by
2 posts views Thread by JackC | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.