Mercurial > genshi > genshi-test
diff examples/tutorial/geddit/templates/info.html @ 625:dba522b4c31d
GenshiTutorial: implemented AJAX commenting.
| author | cmlenz |
|---|---|
| date | Fri, 31 Aug 2007 17:01:00 +0000 |
| parents | dc35e9882390 |
| children | 693a7212b348 |
line wrap: on
line diff
--- a/examples/tutorial/geddit/templates/info.html +++ b/examples/tutorial/geddit/templates/info.html @@ -5,22 +5,60 @@ <xi:include href="layout.html" /> <head> <title>${link.title}</title> - <link rel="alternate" type="application/atom+xml" title="Geddit: ${link.title}" - href="${url('/feed/%s/' % link.id)}" /> + <link rel="alternate" title="Geddit: ${link.title}" + type="application/atom+xml" href="${url('/feed/%s/' % link.id)}" /> + <script type="text/javascript"> + function loadCommentForm(a) { + $.get("${url('/comment/%s/' % link.id)}", {}, function(html) { + var form = a.hide().parent().after(html).next(); + function closeForm() { + form.slideUp("fast", function() { a.fadeIn(); form.remove() }); + return false; + } + function initForm() { + form.find("input[@name='cancel']").click(closeForm); + form.submit(function() { + var data = form.find("input[@type='text'], textarea").serialize(); + $.post("${url('/comment/%s/' % link.id)}", data, function(html) { + var elem = $(html).get(0); + if (/form/i.test(elem.tagName)) { + form.after(elem).remove(); + form = $(elem); + initForm(); + } else { + if ($("ul.comments").length == 0) { + a.parent().before('<ul class="comments"></ul>'); + } + $("ul.comments") + .find("li.hilite").removeClass("hilite").end() + .append($(elem).addClass("hilite")).slideDown(); + closeForm(); + } + }); + return false; + }); + } + initForm(); + }); + } + $(document).ready(function() { + $("a.action").click(function() { + loadCommentForm($(this)); + return false; + }); + }); + </script> </head> <body> <h1>${link.title}</h1> <a href="${link.url}">${link.url}</a><br /> posted by ${link.username} at ${link.time.strftime('%x %X')}<br /> - <p><a class="action" href="${url('/comment/%s/' % link.id)}">comment</a></p> - <ul py:if="link.comments" class="comments"> - <li py:for="idx, comment in enumerate(link.comments)" id="comment$idx"> - <strong>${comment.username}</strong> - at ${comment.time.strftime('%x %X')} - <blockquote>${comment.content}</blockquote> - </li> + <xi:include href="_comment.html" + py:for="num, comment in enumerate(link.comments)" /> </ul> + + <p><a class="action" href="${url('/comment/%s/' % link.id)}">comment</a></p> </body> </html>