Parse django template tag with custom filter for a live preview container via javascript

Question

I need to create a live preview container (like stackoverflow and Reddit) for my django website using textile as my markup language.

Is there a way to do it on the client side? (without using ajax?)

Parsing the code from the view is as simple as:

{% load markup %}
{{ theme.content|textile }}

(Needless to say, I followed the documentation and included 'django.contrib.markup' to my INSTALLED_APPS setting.)

For simplicity's sake, lets assume I don't need IE support. My JS looks as follows:

function change_preview() {
    var fragment = document.createDocumentFragment();
    // I am no sure what should I put here:
    fragment.appendChild(document.createTextNode('{{ theme.content|textile }}'))
    document.getElementById("preview").appendChild(fragment);
}

window.onload = function() {
    var content_box = document.getElementById('id_content');
    content_box.addEventListener("input", change_preview , false );
}

And HTML:

<textarea id="id_content" rows="10" cols="40" name="content"></textarea>
<div id = "preview"></div>

Also I found this JS library. Is it a good idea to use it on the client-side together with PyTextile on the server-side?

What are the best practices?

I am looking for non-jQuery solutions, but I will accept one if there are no other ways to do it.

Thank you in advance.

Answer 1

Since textile specifies what markup corresponds to what html I don't see a big potential for incompatibilities between a JS lib and a Py lib.

In your script for an immediate preview update you might want to use the keyup event instead of the input event since the latter is only fired when the textarea looses focus.

window.onload = function() {
    var content_box = document.getElementById('id_content');
    content_box.addEventListener("keyup", change_preview , false );
}

To use Ben Daglish's lib, which is not based on jQuery, your event handler would look like this:

function change_preview() {
    var content_box = document.getElementById('id_content');
    var html = convert(content_box.value);
    document.getElementById('preview').innerHTML=html;
}