Jorge Godoy wrote:
> "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> writes:
>
> > Any suggestions?
>
> Yes. Show us code.
>
> --
> Jorge Godoy <[EMAIL PROTECTED]>
I thought the html and javascript to get there might only confuse the
issue. I will provide code that does not work and then code that
works.
With this code, only the div toggles upon clicking the anchor. Logging
shows that MochiKit.Visual.toggle is called on both the div and p.
INFO: Added 2 toggles to anchor
INFO: Toggled: P
INFO: Toggled: DIV
HTML (note: custom DTD):
<script type="text/javascript">
MochiKit.Signal.connect( window, 'onload', startBody );
</script>
<div group='adv-opts' style='display: none;'>Some Advanced
Options.</div>
<p group='adv-opts' style='display: none;'>More advanced Options!</p>
<a href="/toggle?a=1" behavior="toggle" targetgroup="adv-opts">Advanced
Options</a>
Javascript:
function startBody()
{ connectToggles();
MochiKit.LoggingPane.createLoggingPane();
}
/* Add toggle behavior to appropriate element */
function connectToggles()
{ var eles = getElementsWithAttributeAndValue( 'behavior', 'toggle' );
var c, e, g;
for( c = 0; c < elements.length; c++ )
{ e = eles[c];
g = MochiKit.DOM.getNodeAttribute(e, 'targetgroup');
if( g )
{ e.toggles = getElementsWithAttributeAndValue( 'group', g );
MochiKit.Logging.log("Added " + e.toggles.length + " toggles to anchor"
);
MochiKit.Signal.connect( e, 'onclick', doToggles );
if( e.nodeName == "A" )
{ e.href = "#"; }
}
}
}
function doToggles()
{ if( this.toggles )
{ for( var c = 0; c < this.toggles.length; c++ )
{ MochiKit.Visual.toggle( this.toggles[c] );
MochiKit.Logging.log( "Toggled: ", this.toggles[c].nodeName );
}
}
}
/* Get elements with a specific value for an attribute */
function getElementsWithAttributeAndValue( attribute, value, parent )
{
if( typeof(attribute) == 'undefined' || attribute === null )
{ return; }
if( typeof(parent) == 'undefined' || parent === null )
{ parent = MochiKit.DOM.currentDocument(); }
var children = walkTree( parent );
var child, chval, v, i, j, elements = [];
for( i = 0; i < children.length; i++ )
{ child = children[i];
chval = MochiKit.DOM.getNodeAttribute( child, attribute );
if( chval )
{ v = chval.split(' ');
for( j = 0; j < v.length; j++ )
{ if( v[j] == value )
{ elements.push(child);
break;
}
}
}
}
return elements;
}
function walkTree(start, ret)
{ if( typeof(ret) == 'undefined' || ret === null )
{ ret = new Array; }
// Ignore text and comments
if( start.nodeType != 3 && start.nodeType != 8 )
{ ret.push( start ); }
if( start.firstChild != null )
{ walkTree( start.firstChild, ret ); }
if( start.nextSibling != null )
{ walkTree( start.nextSibling, ret ); }
return ret;
}
-----------------------------------------------------------------------------
I'm baffled because this code works like I expect:
<html>
<head>
<script src="/javascript/MochiKit.js" type="text/javascript"></script>
<script type="text/javascript">
function startBody()
{ connectToggles(); }
function doToggles()
{ if( this.toggles )
{ for( var c = 0; c < this.toggles.length; c++ )
{ MochiKit.Visual.toggle( this.toggles[c] ); }
}
}
function connectToggles()
{ var anchor = MochiKit.DOM.getElement('anchor');
var ele1 = MochiKit.DOM.getElement('adv1');
var ele2 = MochiKit.DOM.getElement('adv2');
anchor.toggles = new Array( ele1, ele2 );
MochiKit.Signal.connect( anchor, 'onclick', doToggles );
}
</script>
</head>
<body>
<script type="text/javascript">
MochiKit.Signal.connect( window, 'onload', startBody );
</script>
<div id='adv1' style='display: none;'>Some Advanced Options.</div>
<p id='adv2' style='display: none;'>More advanced Options!</p>
<a href="#" id='anchor'>Advanced Options</a>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at http://groups.google.com/group/mochikit
-~----------~----~----~----~------~----~------~--~---
