Using ajax on the web is old technology. Writing a good javascript to achieve this is not difficult, but it is rarely covered in introduction to ajax tutorials. The result is a mixing of html “templates” inside your javascript code. If you change your original markup at all, you have to remember to also update your template and if you have more than a single ajax call on your website, your site becomes a fragile mess.
Below I will outline some techniques that I use when developing websites that help keep my Javascript to a minimum and prevent me from repeating myself.
Create a convention, and stick to it
Create your naming scheme for your DOM ids and CSS classes and stick to it. This will make it a lot easier to write your javascript in a generic fashion and then process requests on the server.
For IDs, I usually combine at minimum the action and a unique identifier ( record id or primary key ) sandwiching a hyphen. If I am doing work with multiple forms on a page, I might also include the form prefix in the identifier as well.
Create css class conventions for basic actions, and use them consistently. The main 2 that I use are a class named “link” and “ajaxAction”.
Render responses server side
You should never embed html templates into your javascript. Ever. As stated above this creates a fragile mess that is difficult to maintain. Instead take advantage of your web framework’s template rendering system ( you are using some kind of framework, right? ). Make sure it’s the same template that you also use to originally generate the page in the first place. I use Django for most of my web development, so if I am rendering a table that is ajax’ified my table template might look something like this:
<!-- table.html -->
<table>
{% for row in data %}
{% if forloop.first %}
<tr>
<th>Date</th>
<th>Message</th>
</tr>
{% endif %}
{% include 'message_row.html' %}
{% endfor %}
</table>
<!-- message_row.html -->
<tr>
<td>{{row.data}}</td>
<td>{{row.message}}</td>
</tr>My ajax response would then simply render message_row.html as part of its response. This insures that by ajax response and my original rendering are always the same.
Use Delegates Instead of Bindings
When first learning how to use jQuery, we usually bind our dom objects either directly via identifiers or by css classes. This works fine, until you try to add a new element after initial binding. You can click all that new element all you want, but it won’t respond until you rebind it. Again, unsustainable.
Learn to use delegates instead. The effectively automatically binds all elements on the page, no matter when they are added, by doing lazy processing of the request.
$('.ajaxAction').bind('click', function() { } ); //BAD $('body').delegate('.ajaxAction','click', function() { } ); //GOOD
Conclusion
Javascript doesn’t have to be ugly and repetitive, although it is often introduced in manners that encourage this. Writing clean and concise Javascript is not difficult, but it does take some discipline and planning. Following the 3 above techniques alone will not guarantee your code is perfect, but it will greatly enhance maintainability and reduce errors in common functions on your site.
