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
_______________________________________________
New York PHP Community Talk Mailing List
http://lists.nyphp.org/mailman/listinfo/talk
NYPHPCon 2006 Presentations Online
http://www.nyphpcon.com
Show Your Participation in New York PHP
http://www.nyphp.org/show_participation.php
