itf/itf/templates/test/person_form.html

{% extends 'noel/base.html' %}
{% load crispy_forms_tags %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/noel/inner.css" type="text/css" />
<link rel="stylesheet" href="/static/css/register.css" type="text/css" />
<!-- note that there's also blue.uni-form.css and dark.uni-form.css available if you want to try changing defaults up -->
<link rel="stylesheet" href="/static/uni_form/uni-form.css" type="text/css" />
<link rel="stylesheet" href="/static/uni_form/default.uni-form.css" type="text/css" />
<link rel="stylesheet" href="/static/css/select2/select2.css" />
<script type="text/javascript" src="/static/js/RelatedObjectLookups.js"></script>
<style type="text/css">
    .select2-search-choice {
        float: none !important;
    }

    .select2-input {
        width: 200px !important;
    }

    .delete-row {
        display:none !important;
    }

    .inlineHidden {
        display:none;
    }
    
    div[id$="DELETE"] {
        color: red;
    }
</style>
<!-- uni-form JS library, optional -->
<script src="/static/uni_form/uni-form.jquery.js" type="text/javascript"></script>
<script src="/static/js/select2.js" type="text/javascript"></script>
<script src="/static/js/jquery.formset.js"></script>
<script src="/static/js/itfSelect2.js"></script>

<script type="text/javascript">


$(function(){
    $('form.uniForm').uniform();
/*
    $('select').select2({
        
    });
*/
/*
    sampleData = [
        {
            'id': 'foo',
            'text': 'some text',
            'first_name': 'some',
            'last_name': 'test'
        }
    ];
*/


    $('.select2class').itfSelect2();

/*
    $('.select2class').select2({
        //placeholder: 'Select your connections',
        //multiple: true,
        ajax: {
            url: '/autocompletes/itfprofiles/',
            dataType: 'json',
            quietMillis: 100,
            data: function(term, page) {
                return {
                    q: term,
                    page_limit: 10,
                    page: page
                    
                }
            },
            results: function(data, page) {
                //console.log(data);
                var more = data.has_next;
                //console.log(data);
                return {results: data.items, more: more};
            }
        },
        formatResult: function(item) {
            //console.log(item);
            return "<div>" + item.first_name + " " + item.last_name + "<div style='font-size:12px'><i>" + item.about + "</i></div></div>";
        },
        formatSelection: function(item) {
            //console.log(item);
            //return "<div>" + item.first_name + " " + item.last_name + "<div>" + item.about + "</div></div>";
            //console.log("foo");
            return item.text;           
            //return "<div data-id='" + item.id + "'>" + item.first_name + " " + item.last_name + "</div>";
        },
        createSearchChoice: function(term) {
            s = term.split(" ");
            first_name = s[0];
            last_name = s.length > 1 ? s[1] : '';
            return {
                'id': "x_" + parseInt(Math.random() * 1000),
                'text': term,
                'first_name': first_name,
                'last_name': last_name,
                'about': '...'
            }
        }
    });
*/
//    console.log(sampleData);
//    $('#id_connections').select2("val", sampleData);

//    var val = $('#id_connections').select2("val");
//    $('#id_connections').data("old_val", sampleData);
/*
    $('.select2-choices').on("click", function(e) {
        console.log(e.target);
    });

    $('#id_connections').bind("change", function(evt) {
        var $this = $(this);
        var val = $(this).val();
        var oldVal = $(this).data("old_val");
        var newVal = $(this).select2("val");
                
        var deletedItem = (function() {
            var ret = false;
            oldVal.forEach(function(o) {
                if ($.inArray(o, newVal) == -1) {
                    ret = o;
                }
            });
            return ret;
        })();
        
        if (deletedItem) {
            
            console.log("deleted", deletedItem);
        }

        var newItem = (function() {
            var ret = false;
            newVal.forEach(function(n) {
                if ($.inArray(n, oldVal) == -1) {
                    ret = n;
                }
            });
            return ret;
        })();

        //console.log(newItem);
        if (newItem) {
            console.log("new item", newItem);
        }

        var currVal = $(this).select2("val");
        $(this).data("old_val", currVal);

    });
    //$('#id_connections').change();
*/
});
    
  
</script>
{% endblock %}


{% block content %}
<div id="centerInner">
   	<div id="shadow">
   	</div>
    <div id="searchContainer">
        {% if form.errors %}
        <div class="topFormErrors">
            Please correct the errors below and re-submit.
        </div>
        {% endif %}
        <form id="formItf" action="" class="uniForm" method="POST">
            {% csrf_token %}
            <div>
              <!--  <input type="hidden" data-placeholder="Choose Connections" id="id_connections" name="connections" style="width:600px" />  -->
            </div>
                {% crispy form form.helper %}
                                      
                {% for inline in inlines %}
                <div class="inlineWrapper">
                    <h3 class="orange"> {{inline.title }} </h3>
                    <div class="inlineHidden">
                        {% if inline.help_text %}
                        <div class="formset_help_text"> {{ inline.help_text }}</div>
                        {% endif %}
                        <div class="itf_formset" id="formset_{{inline.prefix}}">
                        {% crispy inline inline.form.helper %}
                        </div>
                    </div>
                </div>
                {% endfor %}
                <div class="inlineWrapper">
                    <h3 class="orange">Multimedia</h3>
                    <div class="inlineHidden">
                        {% if add %}
                        <div class="formset_help_text">
                            Please save before you can add media galleries to this.
                        </div>
                        {% else %}
                        <div class="formset_help_text">
                            {% if not galleries.objects.all %}
                                You haven't added any galleries yet.
                            {% else %}
                                Click an existing gallery to edit:
                            {% endif %}
                        </div>
                            {% if galleries %}
                        <div class="galleryFormWrapper">
                                {% for gallery in galleries.objects.all %}
                            <div class="galleryFormList">
                                <a href="{{ gallery.get_edit_url }}" />{{ gallery.title }}</a>
                            </div>
                                {% endfor %}
                        </div>
                            {% endif %}
                            <a href="/mediagallery/add/{{ content_type_id }}/{{ object.id }}" class="addGalleryBtn" target="_blank">
                                + Add New Media Gallery
                            </a>
                        {% endif %} {% comment %} close if not edit conditional {% endcomment %}
                    </div>
                </div>

            <br />
            <input type="submit" value="Submit" />
        </form>
    </div>

</div>
<script type="text/javascript">
$(function() {
    $('.inlineWrapper h3').toggle(function() {
        $(this).parent().find('.inlineHidden').slideDown();
    }, function() {
        $(this).parent().find('.inlineHidden').slideUp();
    });

    {% for inline in inlines %}
    $('#formset_{{inline.prefix}}').formset({
        prefix: '{{ inline.prefix }}',
        formCssClass: 'dynamic-formset{{forloop.counter0}}'
    });
    {% endfor %}
});
</script>

{% endblock %}