20 Dec 08 Anatomy of a Shoutbox; Part 5 – Edit In Place
In this post I’ll show how I got an edit-in-place feature working with the shoutbox. In case you missed the earlier parts, here they are: part 1, part 2, part 3, part 4.
The first thing I did was create a “shout history” view. This allows you to view the shouts in a full page context. In my views.py file I created this:
def view(request, page=1):
"""This view allows one to view the shoutbox history."""
paginator = DiggPaginator(Shout.objects.all(), SHOUTS_PER_PAGE, body=5, tail=3, margin=3, padding=2)
try:
the_page = paginator.page(int(page))
except InvalidPage:
raise Http404
return render_to_response('shoutbox/view.html', {
'page': the_page,
},
context_instance = RequestContext(request))
Here I am using the DiggPaginator, which is a very nice paginator that gives you “Digg-style” pagination. I then pass the page object to the template which does most of the interesting work.
In order to get the edit-in-place funcitonality to work, I am leveraging the Jeditable jQuery plugin. In order to use this plugin, in my shoutbox/view.html template I include <script> tags to bring in both the jQuery javascript library and the Jeditable plugin code. I then loop over the shouts for the page and display them along with the avatar and links to the user that made the shout. You’ll also see me using the smilify fiilter I discussed in part 4.
