kpsul/bda/templates/bda/inscription-tirage.html

{% extends "base_title.html" %}
{% load staticfiles %}

{% block extra_head %}
<script src="{% static 'js/jquery-ui.min.js' %}" type="text/javascript"></script>
<script src="{% static "js/jquery.ui.touch-punch.min.js" %}" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="{% static "css/jquery-ui.min.css" %}" />
<link type="text/css" rel="stylesheet" href="{% static "css/bda.css" %}" />
{% endblock %}

{% block realcontent %}
<script type="text/javascript">
var django = {
    "jQuery": jQuery.noConflict(true)
};

(function($) {
    cloneMore = function(selector, type) {
        var newElement = $(selector).clone(true);
        var total = $('#id_' + type + '-TOTAL_FORMS').val();
        newElement.find(':input').each(function() {
            var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
            var id = 'id_' + name;
            $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
        });
        newElement.find('label').each(function() {
            var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
            $(this).attr('for', newFor);
        });
        // Cloning <select> element doesn't properly propagate the default
        // selected <option>, so we set it manually.
        newElement.find('select').each(function (index, select) {
            var defaultValue = $(select).find('option[selected]').val();
            if (typeof defaultValue !== 'undefined') {
                $(select).val(defaultValue);
            }
        });
        total++;
        $('#id_' + type + '-TOTAL_FORMS').val(total);
        $(selector).after(newElement);
    }
    deleteButtonHandler = function(elem) {
        elem.bind("click", function() {
            var deleteInput = $(this).prev().prev(),
                form = $(this).parents(".dynamic-form").first();
            // callback
            // toggle options.predeleteCssClass and toggle checkbox
            if (form.hasClass("has_original")) {
                form.toggleClass("predelete");
                if (deleteInput.attr("checked")) {
                    deleteInput.attr("checked", false);
                } else {
                    deleteInput.attr("checked", true);
                }
            }
            // callback
        });
    }; 
    $(document).ready(function($) {
        deleteButtonHandler($("table#bda_formset tbody.bda_formset_content").find("a.remove-btn"));
        $("table#bda_formset tbody.bda_formset_content").sortable({
            handle: "a.drag-btn",
            items: "tr",
            axis: "y",
            appendTo: 'body',
            forceHelperSize: true,
            placeholder: 'ui-sortable-placeholder',
            forcePlaceholderSize: true,
            containment: 'form#bda_form',
            tolerance: 'pointer',
            start: function(evt, ui) {
                var template = "",
                    len = ui.item.children("td").length;
                for (var i = 0; i < len; i++) {
                    template += "<td style='height:" + (ui.item.outerHeight() + 12 ) + "px' class='placeholder-cell'>&nbsp;</td>"
                }
                template += "";
                ui.placeholder.html(template);
            },
            stop: function(evt, ui) {
                // Toggle div.table twice to remove webkits border-spacing bug
                $("table#bda_formset").toggle().toggle();
            },
        });
        $("#bda_form").bind("submit", function(){
            var sortable_field_name = "priority";
            var i = 1;
            $(".bda_formset_content").find("tr").each(function(){
                var fields = $(this).find("td :input[value]"),
                    select = $(this).find("td select");
                if (select.val() && fields.serialize()) {
                    $(this).find("input[name$='"+sortable_field_name+"']").val(i);
                    i++;
                }
            });
        });
        
    });
})(django.jQuery);
</script>

            <h2 class="no-bottom-margin">Inscription au tirage au sort du  BdA</h2>
            <form class="form-horizontal" id="bda_form" method="post" action="{% url 'bda-tirage-inscription' tirage.id %}">
                {% csrf_token %}
                {% include "bda/inscription-formset.html" %}
                <div class="inscription-bottom">
                    <span class="bda-prix">Prix total actuel : {{ total_price }}€</span>
                    <div class="pull-right">
                        <input type="button" class="btn btn-default" value="Ajouter un autre v&oelig;u" id="add_more">
                        <script>
                            django.jQuery('#add_more').click(function() {
                                cloneMore('tbody.bda_formset_content tr:last-child', 'choixspectacle_set');
                            });
                        </script>
                        <input type="hidden" name="dbstate" value="{{ dbstate }}" />
                        <input type="submit" class="btn btn-primary" value="Enregistrer" />
                    </div>
                    <p class="footnotes">
                        <sup>1</sup>: cette liste de v&oelig;ux est ordonnée (du plus important au moins important), pour ajuster la priorité vous pouvez déplacer chaque v&oelig;u.<br />
                    </p>
                </div>
            </form>
{% endblock %}