addEventListener not adding var in function

[davonz]

Hi

I have spent 2 days struggling to get a veriable to be assigned to "City" and then added as a veriable pasted to the function getDealer.

"data" is an array filled with cities names and I index the array by using the veriable "count"

I am adding a row to a table and then adding a new cell to the row and then adding text to the cell. After this I just want to add an event to the cell so that if some one click on the cell then it is sent to the function "getDealer" and depending on the cell in which it was clicked the name of the city is passed to the function along with "Island" and "Region".

Some help on this would be magic...

data[0] = "Cambridge";
data[1] = "Hamilton";
data[2] = "TeAwamutu";

var Island = "North Island";
var Region = "Waikato";

var count = 1;
while(count < data.length-1){	// -1 because the first line in the table already displayed
    var newRow = theTable.insertRow(theTable.rows.length)	  
    newRow.id = "row"+theTable.rows.length;
    var newCell
    newCell = newRow.insertCell(0);			
    newCell.id = "cellid"+count; 
    newCell.innerHTML = data[count]; 	// City 									
    var City = data[count]; 
			
    // ADD onclick event for list (NOTE: browser dependent)
    if(window.addEventListener){ // Mozilla, Netscape, Firefox
        document.getElementById("cellid"+count).addEventListener('click', function()  {getDealer(Island,Region,City)}, false);  
    } else { // IE
        document.getElementById("cellid"+count).attachEvent('onclick', function(){getDealer(Island,Region,City)});   			
    } 
    count++;
}

function getDealer(Island,Region,City){
   alert(Island+","+Region+","+City);
}

[Troy III]

Hi there Davonz.
Do you happen to recieve any type or error line report on this function?

Is it causing errors or simply returning "undefined" in aler box?

[Troy III]

Hi

I have spent 2 days struggling to get a veriable to be assigned to "City" and then added as a veriable pasted to the function getDealer.

...

All right, don't loose another day waiting...

I offer you this solution:
(although I don't understand your aproach very well)

<script>

   var data = new Array() // ?backward compatibility ensurance! :')
	data[0] = "Cambridge";
	data[1] = "Hamilton";
	data[2] = "TeAwamutu";

   var Island = "North Island";
   var Region = "Waikato";
   var City; 
   var count = 1; //you should give it "count = 0" try
//! otherwise one of generated cells might not recieve its event function!

while(count < data.length-1){ 

	var newRow = theTable.insertRow(theTable.rows.length) 
	newRow.id  = "row"+theTable.rows.length;

   var newCell
	newCell    = newRow.insertCell(0); 
	newCell.id = "cellid"+count; 
	newCell.innerHTML = data[count]; // City 
	newCell.onclick = function(){City=this.innerHTML;getDealer()}

/* * * * WARNING (!) crossbrowser mess ahead  *  Disabling... * * * * 
 *
 * // ADD onclick event for list (NOTE: browser dependent)
 *
 * if(window.addEventListener){ // Mozilla, Netscape, Firefox
 * document.getElementById("cellid"+count).addEventListener('click', function() {getDealer(Island,Region,City)}, false); 
 * } else { // IE
 * document.getElementById("cellid"+count).attachEvent('onclick', function(){getDealer(Island,Region,City)}); 
 * } 
 *
 * * * * code mess pased! *  Disabling End * * * */

count++;
}

function getDealer(){
	alert(Island + ", " + Region + ", " + City);
}
</script>

* You may delete the disabled script content [if your test proves successful ] if not, feel free to delete the complete function :'D

[davonz]

Hi Troy

Thanks for your responce and sorry I have not replied sooner.... it seams that I have been burning the midnight oil to much and ended up getting laid out flat on my back for a number of days...

Unfortunatly the aswer that you gave was not quite what I was after and so I thought I better explain firstly what I am trying to do and then explain the code that I have written.

My objective is to have a image map of New Zealand that people coming to the site can click on an region this will then display in a table the area within this region. From here they can then click on the cities name that is in that region and they will get a list of dealers in that city. Ok so that is how it works from a users perspective. From a progamming perspecitve this is how I am implementing it in code.

1) User clicks on the area in the map and it calls a function getCity and this is the event that I have attached to the area on the image.

onClick="getCity('North Island','Northland')

This of course calls my javascript function getCity which makes a AJAX request to the server and runs some PHP script which outputs to the screen a list of the cities. This is then captured by the return value of the AJAX. (I havn't shown the AJAX Script as it is lengthly and I have already posted this however below is the other two scripts)

function getCity(Island,Region){
 	//alert(Region+" Dealers "+Island);
 	makeRequest("ajax_dealer_list.php?Island="+Island+'&Region='+Region);
}

// Function to deal with returned request
function alertContents(httpRequest) {
    if (httpRequest.readyState == 4) {
        if (httpRequest.status == 200) {
            changeText(httpRequest.responseText);
            //alert(httpRequest.responseText);
        } else {
            alert('There was a problem with the request. '+httpRequest.status);
        }        
    }
}

Ok so finally we then call the function responceText and this is where I start to process the information that was outputed from the PHP script I have on the server. Before we start getting into the piece of code I have to explain that on the page is a table with the id=dealer_table and the output from the PHP code on the server is in the following format. The output is determined based on wether you pass it "Island", "Region" or "City" info.

If it is a request for Cities list then (Island & Region info only)
line1 = Country,Region
line2 = City 1
line2 = City 2
etc....

If the request was for dealers from a city then the output would be (Island + Region + City)
line1 = Country,Region,City
line2 = Company, Address, Area, Post Code, Phone
line3 = Company2, Address2, Area2, Post Code2, Phone2
etc....

function changeText(newText){
   var theTable = document.getElementById("dealer_table"); 
   // Break up data received into rows so as to populate the table
   var data = newText.split("<br>");
	
   document.getElementById('title').innerHTML = data[0];
   // Split data for use later
   var firstLine = data[0].split(",");
   var Island = firstLine[0];
   var Region = firstLine[1];
   var City = firstLine[2];
	
   // Remove all rows in the table except the first row (cleans table for display)
   while(theTable.rows.length > 1) {
      theTable.deleteRow(document.getElementById("row"+theTable.rows.length).rowIndex);
   }

   dealerInfo = data[1].split(",")
   if(dealerInfo[1]) {	// LIST THE DEALERS
      alert("List the dealers now");
      // CODE YET TO BE WRITTEN TO LIST DEALERS
   } else { // LIST THE CITIES
      var count = 1;
      while(count < data.length-1){  // -1 because the first line in the table already displayed
          var newRow = theTable.insertRow(theTable.rows.length);   	  
          newRow.id = "row"+theTable.rows.length;
          var newCell;
          newCell = newRow.insertCell(0);			
          newCell.id = "cellid"+count; 
          newCell.innerHTML = data[count]; 	// City 				     
          City = this.innerHTML;
          // ADD onclick event for list (NOTE: browser dependent)
          if(window.addEventListener){ // Mozilla, Netscape, Firefox
             document.getElementById("cellid"+count).addEventListener('click', function(){getDealer(Island,Region,City)}, false);  
          } else { // IE
             document.getElementById("cellid"+count).attachEvent('onclick', function(){getDealer(Island,Region,City)});  			
          } 
          count++;
      }
   }
}

Ok so the first part of this is easy .... I am simply creating a var and assigning it to the object "theTable" and I am using getElementById as I have found recently that document.all is not a good method to use as it is not going to be compatiable with all browsers. Then I simply split up my data that was returned from the AJAX request into each line ready for processing. I use "<br>" to preform the split as this is how I have coded it in PHP as part of the output.
Next I simply split up the first line so that I can use this information to 1) display at the top of the page so customers know what region that are looking at and 2) so that I can determine which region I need to append on to the end of the onclick event. (will get onto this later)
I Now clear the dealer_table so that I only have one row left at the top which is where I display the Island and Region information and city if I am listing the dealers. This line is got a id=title and so is not dynamically created. Here is the table...

<table id="dealer_table">
  <tr><td id="title"></td></tr>
</table>

Next I split the first line of data to see if I am listing dealers or I am listing City information. I am relying on the fact that if I am listing dealers then I will have a entry in the array where the address part is, hence I am looking for dealerInfo[1] and not dealerInfo[0]. As I am looking at city information this time through the then I will also never have an entry in dealerInfo[1] as dealerInfo[0] will contain the city name.

I then create a new row in the "dealer_table" table and asign it a row id based on what row number I am up to. I also then create a cell in the row and assign it an id that is the same number as the row id. And fill the cell with city name. The next part is the part that I simply can not get to work ....

I first detect what browser the user is using and then depending on that I then try to at the event "onClick" to the City so that when the customer clicks on the city it will then run through this script again however this time it will list all the dealers and not the cities.

In htlm am wanting each line of the city to have the city as a value being passed to the function "getDealer(Island,Region,City)" it is the City part that is the veriable and must change and be added to the onclick event.

<td name="" id="" onClick="getDealer(New Zealand,Waikato,Hamilton)">Hamilton</td>
<td name="" id="" onClick="getDealer(New Zealand,Waikato,Cambridge)">Cambridge</td>

I hope this makes a little more sence now and once again sorry for the delayed responce.