On Dec 17, 2012, at 5:13 AM, Agnese Camellini wrote:
>
>
> 2012/12/17 Walter Lee Davis <wa...@wdstudio.com>
>
> <?php print 'This is DYNAMIC thing ' . preg_replace('/[^\d]+/', '',
> $_POST['id']); ?>
>
> Call that script page.php and modify the JavaScript as follows:
>
> <script type="text/javascript">
> var toggles = $$('.toggle').invoke('hide');
>
> is this a way to substitute a CSS property, alternative to setStyle({display:
> 'none'})?
hide() and show() are simplified syntax to hide and show an element. The hide
adds display:none, but show doesn't just add display:block -- it removes
display:none, letting the native element display property (as modified by any
existing CSS) to shine back through.
>
> $('menu').on('click', 'a', function(evt, elm){
> evt.stop();
> toggles.invoke('hide');
> var target = elm.href.split('#').last();
>
> What do the evt and elm arguments represent?
The on() function takes three arguments: the event that it observes, an
(optional) CSS selector to refine the targeting on that event, and the function
body to be wrapped around the event and its triggering element. If you call it
with only two arguments, then the first is the name of the event, and the
second is the function body. See: http://api.prototypejs.org/dom/Element/on/
and more here: http://api.prototypejs.org/dom/Event/on/
If you were to write that line of my example out in pseudocode, here's what it
says:
When #menu receives a click event (which may have bubbled up from one of its
children),
If that click was on an 'a'
Fire this anonymous function, passing it the click event itself and the 'a'
that was clicked.
This code encapsulates a lot of lines of branching code in your example into
that one expression, and spackles over the differences between browsers as it
does so.
>
> new Ajax.Updater(target,
> 'page.php', {
> parameters: {
> id: target
> },
> onSuccess: function(){
> $(target).show();
> }
> });
> </script>
>
>
> Souldn't the element "target" be one of the elements "toggle" hided before? I
> could use the for loop in my script to identify a list of id in sequence.
The target is gathered a few lines before, by splitting the href of the elm
(the link that was clicked). This could be gathered earlier and just once if
you wanted to optimize things further. There is no need to loop over anything,
because elm is already a JavaScript reference to the link that was clicked, so
we have full two-way access to it. Yes, it was hidden before, along with all of
its peers. Inside this anonymous function, the external variable 'toggles' is a
reference to the entire collection of elements you are showing and hiding.
>
> Why don't you call the innerHTML function or others? i mean, why Ajax.Updater?
Read the API. Yes, under the covers that method is being used, but again, a
whole lot of branching conditional logic is encapsulated away from your main
application, so you don't have to worry about different browsers'
implementation details. Ajax.Updater is a combination of the Ajax.Request and
Element.update methods -- a short-cut for those cases where you want to make an
Ajax request and immediately update an on-screen element with the results of
that request. Element.update() does use innerHTML in the browsers that support
it, and something heavier-handed for those that do not implement the spec as
written.
Hope that helps.
Walter
>
>
> Now when you click this link, the ID will be passed to the script. In this
> trivial example, the non-numeric parts will be stripped out, and the result
> will be concatenated with a string and returned through Ajax to populate the
> box on the screen, which will show as soon as that reply is received. In your
> more complex example, you could look up the latest news from Yahoo (using
> PHP, since that doesn't suffer from cross-domain restrictions like JavaScript
> does) and put that in there instead.
>
> Walter
>
> Thanks
> Agnese
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to prototype-scriptaculous@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
