Re: [Proto-Scripty] Prototype dom
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.
Re: [Proto-Scripty] Prototype dom
Hope that helps. Walter It does, thanks for your time. 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.
Re: [Proto-Scripty] Prototype dom
On Dec 16, 2012, at 8:59 AM, tab1ta wrote:
Hello.
I'm studying, there is a piece of code i cannot get to work, so i was asking
myself if you can help, given that all the pastebin doesn't accept the
prototype link.
Which ones have you tried? JSFiddle has Prototype as one of its many libraries,
ready to use. This has the added benefit that the code is rendered and runs in
your browser while you are working on your example. Others can fork your
fiddle and fix it there, too.
I'm not exaclty sure of what it does, i assume it goes through the document
dom to place every div page in the right order to be viewed. Its a php file,
and i can't really understand why php is needed to solve this task, however
is a pice of code found in a book, it could be wrong.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en
head
script type=text/javascript src=prototype.js/script
script type=text/javascript
function importNode(p_element, p_allChildren) {
switch (p_element.nodeType) {
case 1:
var newNode =
document.createElement(p_element.nodeName);
if (p_element.attributes
p_element.attributes.length 0)
for (var i = 0, il=p_element.attributes.length; i
il;)
newNode.setAttribute(p_element.attributes[i].nodeName,
p_element.getAttribute(
p_element.attributes[i++].nodeName));
if(p_allChildren p_element.childNotes
p_element.childNodes.length 0)
for (var i = 0, il = p_element.childNodes.length;
i il;)
newNode.appendChild(importNode(p_element.childNodes[i++], p_allChildren));
return NewNode;
break;
case 2:
case 3:
return document.createTextNode(p_element.nodeValue);
break;
}
};
No Prototype here, could be written much more clearly and concisely with
Prototype idioms.
function turnPage(p_number) {
var pages = $('article').getElemenetsByTagName('div');
TYPO??? Elemenets !== Elements
(also could be written as $('article').select('div') for added points)
for (var i = 0, il = pages.length; i il; i++) {
$(pages[i]).setStyle({display: 'none'});
$('l' + (i+1)).innerHTML = 'a href=article.php?page=' +
(i+1)+ 'onClick=return turnPage('+ (i+1)+')' +(i+1)+'/a';
}
if ($('page' + p_number).innerHTML == '') {
new Ajax.Request('article.php', {
method: 'post',
parameters: {page:p_number },
onSuccess: function(xhrResponse) {
var response = xhrResponse.responseXML;
var newNode;
if (!window.ActiveXObject) {
newNode =
document.importNode(response.getElementsByTagName('page')[0].childNodes[1],
true);
$('page' + p_number).appendChild(newNode);
} else {
newNode =
importNode(response.getElementsByTagName('page')[0].childNodes[0], true);
$('page' + p_number).appendChild(newNode);
}
$('l' + p_number).innerHTML = p_number;
$('page' + p_number).setStyle({display:
'block' });
},
onFailure: function(xhrResponse) {
$('page').innerHTML = xhrResponse.statusText;
}
});
} else {
$('l' + p_number).innerHTML = p_number;
$('page'+ p_number).setStyle({display: 'block' });
}
return (false);
}/script
The rest of this is a salad of Prototype and non-Prototype coding styles.
There's nothing wrong with a for loop, until you try to loop over a collection
of Prototype-extended elements. That's when you meet the salt as opposed to
the syntactic sugar of Prototype's each() method.
If you can write out, in English as opposed to JavaScript, what it is you're
trying to accomplish here with this code, I might be able to point
Re: [Proto-Scripty] Prototype DOM-traversal methods failing on HTML5 elements in IE 9 using html5shiv
On Jun 30, 2011, at 12:44 PM, Jonny Nott wrote:
Using html5shiv 1.6.2 (latest) (http://code.google.com/p/html5shiv/)
and Prototype v1.7..
So, html5shiv makes article, section etc elements work nicely in
IE9 .. they appear, you can style them etc. All good. The HTML5
elements all exist within the IE DOM tree in Developer Tools.
However, when you try to grab any such HTML5 elements using
Prototype's DOM-traversal methods (e.g. down(), up()), then they
always return undefined in IE8/IE7 (who cares about IE6?). For
example:
article id=foo
div/div
section/section
ul id=abc123/ul
/article
..then..
var bar = $('foo').down('div'); // works
var baz = $('foo').down('section'); // undefined
..and..
var theArticle = $('abc123').up('article'); // undefined
Is this a gaping hole/bug?
Code to reproduce: http://pastebin.com/TC1Dp5At
Try adding this line in a dom:loaded callback, inside an IE
conditional comment:
$w('article aside details figcaption figure footer header hgroup menu
nav section').each(function(elm){
new Element(elm);
});
As far as I know, IE won't let you script something unless you build
one such in memory first. Once you do that, you're golden. Not sure if
I'm just duplicating what HTML5shiv is supposed to do, but this is the
way I've done it before.
Walter
--
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.
