| 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: |
| | 1065 | We'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 | |
| | 1067 | The 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 | |
| | 1096 | And 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 | |
| | 1120 | For 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: |
