NYCPHP Meetup

[Edward Potter]

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
<michael.southwell at nyphp.com> 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/86842405@N00/
Store: http://astore.amazon.com/httpwwwutopic-20