On 17 August 2010 16:34, T.J. Crowder <[email protected]> wrote: > Hi, > > The original code: > > $('vsNewUsers').update($('vsNewUsers').innerHTML + > tmpl_NewUser.evaluate({NewUserID : --i_NewUserID})); > > ...will require the browser to spin through the tree inside vsNewUsers > and create an equivalent HTML string to give you; then tear down that > tree, parse the HTML you give it back (including re-parsing the stuff > it just gave you), re-instantiate a lot of elements that look exactly > the same as the previous one (plus the new ones at the end), re- > calculate the layout of the previous elements (and then the additional > ones), etc. (Layout can be expensive with tables, too, so...) > > Seems like unnecessary work. :-) Granted the browser's going to do it > really fast, but still. Also, you'd lose any event handlers you'd > hooked up to the elements in there and any other data you may have > stored on them. If your user is using IE, any elements that > Prototype's already extended will have to be re-extended (which takes > non-trivial time on big tables). > > Fortunately, Element#insert[1] is for exactly this situation: > > $('vsNewUsers').insert({ > bottom: tmpl_NewUser.evaluate({NewUserID : --i_NewUserID}) > }); > > [1] http://api.prototypejs.org/dom/element/insert/ > > Vis-a-vis using `new Element` rather than HTML: Parsing HTML and > showing the result on the page is fundamentally what browsers do, and > they do it really, _really_ fast. When rendering HTML, they can work > directly with their internal structures. When you use the DOM API, you > lose that benefit and have to work through the browser's DOM API -> > internal structures mapping. And you're doing all of your work in an > interpreted (or at least compiled-on-the-fly) language. > > Net result? Markedly slower -- like an order of magnitude -- to go > through the DOM API vs. using HTML. This isn't a Prototype thing at > all, it's just the nature of browsers and what they're optimized for. > I actually did a test page (not much of one) a little over a year back > when answering a question for someone that showed this in action, and > through the wonder that is 'net search: > http://pastie.org/521342 > > HTH, > -- > T.J. Crowder > Independent Software Consultant > tj / crowder software / com > www.crowdersoftware.com > > On Aug 17, 2:09 pm, Phil Petree <[email protected]> wrote: >> I would think that Creating elements is less limiting... but I have no idea >> what most developers do. >> >> On Tue, Aug 17, 2010 at 8:29 AM, Richard Quadling <[email protected]>wrote: >> >> >> >> > On 17 August 2010 12:59, Phil Petree <[email protected]> wrote: >> > > =========================================================== >> > > HTML save as index.html: >> > > <html> >> > > <head> >> > > <script src="prototype.js"></script> >> > > </head> >> > > <body> >> > > <form id="myform"> >> > > <table id="keytable"> >> > > <tr><td>Keyword</td><td><input type="text" name="keyword_1"></td></tr> >> > > </table> >> > > </form> >> > > <input type="button" onclick="addkeyword()" value="Add Keyword"> >> > > <input type="button" onclick="dosubmit()" value="Submit"> >> > > <div id="result" style="padding:5px;"> >> > > </div> >> > > <script> >> > > var nextkeyid = 2; >> > > function addkeyword() >> > > { >> > > var elTR = $('keytable').insertRow( -1 ); >> > > var elTitleTD = elTR.insertCell( -1 ); >> > > elTitleTD.appendChild( document.createTextNode( 'Keyword' ) ); >> > > var elInput = document.createElement( 'input' ); >> > > elInput.type = 'text'; >> > > elInput.name = 'keyword_'+nextkeyid; >> > > nextkeyid++; >> > > var elInputTD = elTR.insertCell( -1 ); >> > > elInputTD.appendChild( elInput ); >> > > } >> > > function dosubmit( ) { >> > > new Ajax.Updater( 'result', 'add.php', { method: 'post', parameters: >> > > $('myform').serialize() } ); >> > > } >> > > </script> >> > > </body> >> > > </html> >> > > =========================================================== >> > > Serverside PHP save as add.php: >> >> > > Post Result:<br/> >> > > <?php var_export( $_POST ) ?> >> > > =========================================================== >> > > On Tue, Aug 17, 2010 at 7:30 AM, Richard Quadling <[email protected]> >> > > wrote: >> >> > >> On 17 August 2010 12:01, Phil Petree <[email protected]> wrote: >> > >> > That's in the expando example that comes with prototype.js 1.6x >> >> > >> > On Tue, Aug 17, 2010 at 6:35 AM, Richard Quadling < >> > [email protected]> >> > >> > wrote: >> >> > >> >> Hi. >> >> > >> >> I've implemented a simple "add new user" button to my "amend users" >> > >> >> page. The user list is only about 20 people, with >> > >> >> name/email/pin/contracts/delete options. >> >> > >> >> The button calls a template evaluation and that is within an update >> > ... >> >> > >> >> $('vsNewUsers').update($('vsNewUsers').innerHTML + >> > >> >> tmpl_NewUser.evaluate({NewUserID : --i_NewUserID})); >> >> > >> >> All working fine. >> >> > >> >> I like how it works, but I wonder how I can just append the result of >> > >> >> the evaluation. >> >> > >> >> How do I take a template and append the results to vsNewUsers. >> > >> >> vsNewUsers is a tbody element and the template is a <tr> element with >> > >> >> all the <td>'s needed. >> >> > >> >> var tmpl_NewUser = new Template('<tr><td><input type="text" >> > >> >> name="User[#{NewUserID}][Username]" value="" maxlength="200" >> > size="50" >> > >> >> /></td><td><input type="text" name="User[#{NewUserID}][Email]" >> > >> >> value="" maxlength="200" size="50" /></td><td><input type="number" >> > >> >> name="User[#{NewUserID}][PIN]" value="" maxlength="4" >> > >> >> /></td><td><input class="vsaAllContracts" type="checkbox" >> > >> >> name="User[#{NewUserID}][AllContracts]" value="1" >> > >> >> id="allContracts_#{NewUserID}" /></td><td><input type="text" >> > >> >> name="User[#{NewUserID}][ContactIDs]" value="" maxlength="200" >> > >> >> disabled="disabled" size="50" /><input type="hidden" >> > >> >> name="User[#{NewUserID}][ContactIDs]" value=""></td><td><button >> > >> >> class="vsaChooseContracts bold" >> > >> >> id="selectContracts_#{NewUserID}">Select >> > >> >> contracts</button></td><td><input type="checkbox" >> > >> >> name="User[#{NewUserID}][Delete]" value="#{NewUserID}" >> > /></td></tr>'); >> >> > >> >> I'm thinking no. >> >> > >> >> Regards, >> >> > >> >> Richard. >> >> > >> >> -- >> > >> >> Richard Quadling. >> >> > >> >> -- >> > >> >> 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 >> > >> >> [email protected]. >> > >> >> To unsubscribe from this group, send email to >> > >> >> [email protected]<prototype-scriptaculou >> > >> >> s%[email protected]> >> > . >> > >> >> 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 >> > >> > [email protected]. >> > >> > To unsubscribe from this group, send email to >> > >> > [email protected]<prototype-scriptaculou >> > >> > s%[email protected]> >> > . >> > >> > For more options, visit this group at >> > >> >http://groups.google.com/group/prototype-scriptaculous?hl=en. >> >> > >> Can you point me to the URL please? >> >> > >> -- >> > >> Richard Quadling. >> >> > >> -- >> > >> 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 >> > >> [email protected]. >> > >> To unsubscribe from this group, send email to >> > >> [email protected]<prototype-scriptaculou >> > >> s%[email protected]> >> > . >> > >> 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 >> > > [email protected]. >> > > To unsubscribe from this group, send email to >> > > [email protected]<prototype-scriptaculou >> > > s%[email protected]> >> > . >> > > For more options, visit this group at >> > >http://groups.google.com/group/prototype-scriptaculous?hl=en. >> >> > Now in comparison, that process (creating elements, assigning >> > properties, etc.) _LOOKS_ a lot more effort. >> >> > What do most developers do? Templates or createElement? >> >> > -- >> > Richard Quadling. >> >> > -- >> > 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 >> > [email protected]. >> > To unsubscribe from this group, send email to >> > [email protected]<prototype-scriptaculou >> > s%[email protected]> >> > . >> > 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 [email protected]. > To unsubscribe from this group, send email to > [email protected]. > For more options, visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > > And that's why I love Prototype. You guys care, so I don't have to. Well, other than all the testing and re-working.
Sometimes just getting that pointer is all that is needed. Thanks T.J. -- Richard Quadling. -- 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 [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
