Edgewall Software

Changes between Version 55 and Version 56 of GenshiTutorial

Aug 31, 2007, 7:26:06 PM (15 years ago)



  • GenshiTutorial

    v55 v56  
    10631063 '''Note''': technically, what we'll be doing here isn't AJAX in the literal sense, because we'll not being transmitting XML. Instead, we'll respond with simple HTML fragment, a technique that is sometimes referred to as “AJAH”.
    1065 Let's start by adding a new small module to our `lib` package. Inside the `geddit/lib` directory, create a file named `ajax`, and add the following code to it:
     1065We'll go about this in the following way: on a link submission detail page, the “Add comment” button will now load the comment form into the current page, instead of going to the dedicated comment submission page. When the user clicks the “Cancel” button, we simply remove the form from the page. On the other hand, if the user clicks the ”Submit” button, we validate the entry, and if it's okay, we remove the form and load the new comment into the list on the page. That means that the user never leaves or reloads the link submission detail page in the process!
     1067The first thing we need to do is to make the comment form available as a fragment, outside of the normally needed HTML skeleton. To do that, we create a new template file, in `geddit/templates/_form.html`, with the following content:
     1071<form xmlns="http://www.w3.org/1999/xhtml"
     1072      xmlns:py="http://genshi.edgewall.org/"
     1073      class="comment" action="${url('/comment/%s/' % link.id)}" method="post">
     1074  <table summary=""><tbody><tr>
     1075    <th><label for="username">Your name:</label></th>
     1076    <td>
     1077      <input type="text" id="username" name="username" />
     1078      <span py:if="'username' in errors" class="error">${errors.username}</span>
     1079    </td>
     1080  </tr><tr>
     1081    <th><label for="comment">Comment:</label></th>
     1082    <td>
     1083      <textarea id="comment" name="content" rows="6" cols="50"></textarea>
     1084      <span py:if="'content' in errors" class="error"><br />${errors.content}</span>
     1085    </td>
     1086  </tr><tr>
     1087    <td></td>
     1088    <td>
     1089      <input type="submit" value="Submit" />
     1090      <input type="submit" name="cancel" value="Cancel" />
     1091    </td>
     1092  </tr></tbody></table>
     1096And as that is the same form as the one used in the `geddit/templates/comment.html` template, let's replace the markup in that template with an include:
     1100<!DOCTYPE html>
     1101<html xmlns="http://www.w3.org/1999/xhtml"
     1102      xmlns:xi="http://www.w3.org/2001/XInclude"
     1103      xmlns:py="http://genshi.edgewall.org/">
     1104  <xi:include href="layout.html" />
     1105  <head>
     1106    <title>Comment on “${link.title}”</title>
     1107  </head>
     1108  <body>
     1109    <h1>Comment on “${link.title}”</h1>
     1110    <p py:if="comment">
     1111      In reply to <strong>${comment.username}</strong>
     1112      at ${comment.time.strftime('%x %X')}:
     1113      <blockquote>${comment.content}</blockquote>
     1114    </p>
     1115    <xi:include href="_form.html" />
     1116  </body>
     1120For convenience, let's now add a new small module to our `lib` package. Inside the `geddit/lib` directory, create a file named `ajax`, and add the following code to it: