AJAX code duplication

One thing I realised recently while adding some ajaxy functionality to Dynamo is that I end up duplicating code. Some screens in Dynamo allow you to upload files without reloading the screen. You upload a file and it adds it to the Javascript array of file objects (some JSON and AJAX magic happens in between, ofcourse) and then it has to redraw the files list by looping through the files in the array, building the html dynamically and then replacing the old html. The same thing happens with things like post categories.

The problem is that I have to output the list when the page loads. You can do something like only load the list of files or categories or whatever after the page loads and then output them using Javascript, but this is inefficient and slow and sometimes you see the page without the list for a split second and it gets worse over slower links. So far my best idea has been to output the list when the page loads which in my case means inside my Django template, but often I add something to the template and then I have to remember to add the same thing to the Javascipt that redraws the list after AJAX requests.

You can ofcourse go with a more low-tech way of doing things and return the html snippet with the latest list after every AJAX request, but I prefer having a copy of all the data so that I can use it in my Javascript.

I now got this idea for implementing just the basics of the Django template engine in Javascript. Then I can load in the same Django template I use initially and render it inside Javascript.

I wonder if this counts as overengineering things.. Has anyone done anything like this before?

Leave a Response

(will not be published)
(optional)
Remember Me