On Dec 16, 2012, at 3:31 PM, Agnese Camellini wrote: > The page is composed by a list of divs and a simple list, each div is > associated with a link and should be visible only when you click on the link, > but the pages loads every div without recognizing the id, i changed the typo > errors you notified me but it doesn't work anyway. > > The php call leaves me a little confused to. For avoiding problems i named > the file pasted article.php, anyway, it's a book example, that's what i tryed > to do to make it work. > Thanks > Agnese
For the moment, let's ignore the business with the PHP and the Ajax call, let's just get the divs appearing when their corresponding link is clicked. Consider this static HTML page: http://scripty.walterdavisstudio.com/show-hide-divs.html View source on that page. Just as in your example, there is a collection of uniquely-identified DIVs, and a list of links to those DIVs. Breaking down the script line by line, here's what I did: 1. Gather a reference to all of the divs I want to show/hide, and set them each to hide initially. 2. Set an observer on the menu, watching for a click on any 'a' tag inside it, and passing that click event and the 'a' tag to a handler function. 3. Stop the link from behaving normally. 4. Hide any currently visible div from the collection. 5. Get a reference to the target element and show it. 6. Close the function reference. Now that I have the static page working, the dynamic part could be done like this, assuming that you could pass the ID of the receiving element to your script and have it make some sense of the request. For purposes of explanation, we will use this PHP to duplicate what the static example does, but your script can do whatever you want it to do. <?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'); $('menu').on('click', 'a', function(evt, elm){ evt.stop(); toggles.invoke('hide'); var target = elm.href.split('#').last(); new Ajax.Updater(target, 'page.php', { parameters: { id: target }, onSuccess: function(){ $(target).show(); } }); </script> 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 > > > 2012/12/16 Walter Lee Davis <wa...@wdstudio.com> > > 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 you toward > another approach that you might find more readable/understandable. > > Walter > > > <title>Paged navigation</title> > > </head><body> > > <h1> Paged Navigation </h1> > > <div id="article"> > > <div id="page1"> > > <p>This is page one.</p> > > </div> > > <div id="page2"> > > <p>This is page two.</p> > > </div> > > <div id="page3"> > > <p>This is page three.</p> > > </div> > > <div id="page4"> > > <p>This is page four.</p> > > </div> > > <div id="page5"> > > <p>This is page five.</p> > > </div> > > </div> > > <div id="pageNavContainer"> > > <ul id="pageNavList"> > > <li id="l1">1</li> > > <li id="l2"> > > <a href="article.php?page=2" onClick="return > > turnPage(2);">2</a> > > </li> > > <li id="l3"> > > <a href="article.php?page=3" onClick="return > > turnPage(3);">3</a> > > </li> > > <li id="l4"> > > <a href="article.php?page=4" onClick="return > > turnPage(4);">4</a> > > </li> > > <li id="l5"> > > <a href="article.php?page=5" onClick="return > > turnPage(5);">5</a> > > </li> > > </ul> > > </div> > > </body> </html> > > > > -- > > You received this message because you are subscribed to the Google Groups > > "Prototype & script.aculo.us" group. > > To view this discussion on the web visit > > https://groups.google.com/d/msg/prototype-scriptaculous/-/Ibtlp8ZSnzAJ. > > 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. > > > > -- > 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.
