NYCPHP Meetup

[Michael Southwell]

My brain is fried; I need help with a simple AJAX demo. The intent is to 
show the color of some wines upon mousing over their names.

This correctly creates table rows with a name in the first cell and
the second cell blank with an id of "color1", "color2", etc. where the
color will (theoretically) be shown.
============
.....
$tableCounter = 1;
foreach ( $wines as $name ) {
   echo '<tr>
     <td style="border:thin solid"
       onMouseOver="showColor( ' . $tableCounter . ' )"
       onMouseOut="showColor( false )">' . $name . '</td>
     <td style="border:thin solid" id="color' . $tableCounter . '"></td>
     </tr>';
   $tableCounter ++;
}
......
================

This JS has two problems:
1. onMouseOver returns the correct value (according to Firebug) but
doesn't load the inner html, whether I use a hardcoded or variable
getElementById
2. onMouseOut does load the inner html if I hardcode the id, but
throws an error "has no properties" if I try to use a variable
So actually the behavior is (apparently) inconsistent between them.
============
function showColor ( i ) {
   // create variable identifying current id
   var where = 'color' + i
   if ( i == false ) {
     // hardcoding works for testing
     document.getElementById( 'color2' ).innerHTML = 'xxx'
     // variable throws error: has no properties
//    document.getElementById( where ).innerHTML = 'xxx'
     return
   }
   xmlHttp = getXmlHttpObject()
   var uri = 'getColor.php?where=' + where
   uri = uri + '&sid=' + Math.random()
   xmlHttp.onreadystatechange = stateChanged( where )
   xmlHttp.open( 'GET', uri, true )
   xmlHttp.send( null )
}

function stateChanged( where ) {
   if ( xmlHttp.readyState == 4 || xmlHttp.readyState == "complete" ) {
// these both get the correct response but neither loads the innerHTML
     document.getElementById( 'color1' ).innerHTML = xmlHttp.responseText
//    document.getElementById( where ).innerHTML = xmlHttp.responseText
   }
}
===========

What is wrong here?

-- 
=================
Michael Southwell
Vice President, Education
NYPHP TRAINING:  http://nyphp.com/Training/Indepth