There was a task to submit form with ajax, with server side validation of course. Obvious solution is to do validation and return json with erros.
I didn't like idea of writing separate view for validation and then inserting errors in form html on client side. Especially since I already had a generic template for django form with errors display.
Task
User will see process like this:
- User clicks 'edit' near article block
- article is replaced with form
- in case there are validation errors - they are shown above the form fields
- in case there are no errors - form is replaced by article html
Solution
Server will return piece of html that will replace part of page with article or form (with errors if needed). Actually this sentence is the most important part of this blog post. Implementation is very simple and straightforward.
Well actually the fact that you can return parts of html from server is also not new idea at all. It's just only now I finally understood that using this technique you can create more complicated things than modal window or tabs.
Implementation
views.py
def edit_new(request, new_id):
new = get_object_or_404(MyModel, pk=new_id)
if request.method == 'POST':
form = NewsForm(request.POST, instance=new)
if form.is_valid():
new = form.save()
return render_to_response('include/new.html', dict(new=new))
else:
form = NewsForm(instance=new)
return render_to_response('include/form.html', dict(form=form, new=new))form.html
This html will replace article block on 'edit' button click. Javascript should be moved to separate file of course.
<script type="text/javascript">
function submitAndLoad(input) {
$.ajax({
url: "{% url edit_new new.id %}",
data: $(input).parent().serialize(), // форма
type: "post",
dataType: "html",
success: function(data) {
$(input).parent().parent().html(data); // article block
}
});
return false;
};
</script>
<form>
{{ form }}
<input type="submit" value="Save" onclick="return submitAndLoad(this);"/>
</form>news_list.html
<script type="text/javascript">
function editNew(id) {
$("#new-" + id).load("{% url edit_new new.id %}");
return false;
}
</script>
<!-- ... -->
<div id="new-{{ new.id }}">
{% include "news/new.html" %}
</div>
<a onclick="return editNew({{ new.id }});" href="#">Edit</a>Code can be cleaned up of course, I just wanted to show the idea.
Update
I'm translating this article almost five years after it was originally written and of course now it seems very childish :) Now we have angular and ajax forms are implemented a little differently. Still this old solution is not all that bad. I'd still replace one thing here - it's better to return json with html from server instead of just html.
Subscribe for the news and updates
One of our ongoing projects, Neptyne, introduces an Excel-like grid written in React. We used a library to apply virtual scroll to it, but we stumbled upon a problem with fixed rows and columns inside the grid. Here I would like to describe this problem, how it occurs, and how we handled it.
In one of our recent projects, we had an interesting case: the whole application was built around an interactive map for a fairly large shopping mall, and the main goal of the system was to plot the closest route to a user-selected destination.
This article is aimed for beginners, who are trying to choose between Ruby on Rails and Django. Let’s see which is fastest and why.
When we use css-sprites it's important to make browser cache them for longest period possible. On other hand, we need to refresh them when they are updated. This is especially visible when all icons are stored in single sprite. When it's outdated - entire site becomes ugly.
In VIM there is a command for char search: f. After first use it can be repeated with ;. I like to navigate in line with it. You see that you need to go to bracket in a middle of a line - you press f( and one-two ; and you are there. There's no such command in Emacs, so I had to write my own. I've managed even to implement repetition with ;.
In my recent project there was a lot of data business logic, so I had to organize this code somehow. In this article I'll describe a few hints on how to it.