eldarion-ajax-demo/demo/templates/homepage.html

{% extends "site_base.html" %}

{% load i18n %}

{% block head_title %}{% trans "Welcome" %}{% endblock %}

{% block body_class %}home{% endblock %}

{% block topbar_base %}{% endblock %}

{% block body %}
    <div class="alert hide"></div>
    <div class="row">
        <div class="span4"></div>
        <div class="span4" data-timeout="5000" data-url="{% url "status" %}">
            <h1>Tasks</h1>
            <p class="lead">
                A sample tasks app to demonstrate how to use
                <a href="https://github.com/eldarion/eldarion-ajax/">
                    eldarion-ajax
                </a>
            </p>
            <p class="lead" data-interval="1000" data-url="{% url "total_count" %}" data-replace-inner="#total-count">
                There have been <span id="total-count">{{ total_count }}</span> tasks added by everyone.
            </p>
            <form class="form-inline ajax" method="post" action="{% url "task_add" %}" data-append="#tasks">
                {% csrf_token %}
                <div class="input-append">
                    <input type="text" class="span4" name="label" placeholder="Enter a task...">
                </div>
            </form>
            {% include "_complete_count.html" %}
            <div id="message"></div>
            <table class="table table-striped" id="tasks">
                {% for task in tasks %}
                    {% include "_task.html" %}
                {% endfor %}
            </table>
        </div>
        <div class="span4"></div>
    </div>
{% endblock %}


{% block extra_body %}
<script>
    $(function() {
        $("form").on("eldarion-ajax:success", function(e, $el, data) {
            $el.find("input[type=text]").val("");
        });
    })
</script>
{% endblock %}