I would highly recommend you take a look at jQuery. The problem with Ajax is one quote out of place and you're dead in the water - you can spend way too much time debugging. Ajax kind of operates in stealth mode, making it tricky to follow what's really going on behind the scenes.
http://jquery.com/ On Wed, May 21, 2008 at 8:55 PM, Michael Southwell <[EMAIL PROTECTED]> wrote: > 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 > -- IM/iChat: ejpusa Links: http://del.icio.us/ejpusa Blog: http://www.preceptress.com Follow me: http://www.twitter.com/ejpusa Karma: http://www.coderswithconscience.com Projects: http://flickr.com/photos/[EMAIL PROTECTED]/ Store: http://astore.amazon.com/httpwwwutopic-20 _______________________________________________ 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
