Edgewall Software

Changes between Version 55 and Version 56 of GenshiTutorial


Ignore:
Timestamp:
Aug 31, 2007, 7:26:06 PM (15 years ago)
Author:
cmlenz
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • 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”.
    10641064
    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!
     1066
     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:
     1068
     1069{{{
     1070#!genshi
     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>
     1093</form>
     1094}}}
     1095
     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:
     1097
     1098{{{
     1099#!genshi
     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>
     1117</html>
     1118}}}
     1119
     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:
    10661121
    10671122{{{