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;
    }
</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.min.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').each(function() {
        var $this = $(this);
        var ctype_id = $this.attr("data-ctype");
        var url = '/autocomplete/' + ctype_id;
        $this.select2({
            ajax: {
                'url': url,
                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) {
                return "<div>" + item.title +  "<div style='font-size:12px'><i>" + item.text + "</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.title;           
                //return "<div data-id='" + item.id + "'>" + item.first_name + " " + item.last_name + "</div>";
            }                                   
        });
        var id = $this.attr("data-id");
        if ($.trim(id) !== '') {
            var title = $this.attr("data-title");
            $this.select2("val", {'id': id, 'title': title});
        } else {
            $this.select2("val", null);
        }
        
    });

/*
    $('.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">
        <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>
                {{ form|crispy }}
                            
                {% for inline in inlines %}
                    <h3> {{inline.title }} </h3>
                    {% 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>
                {% endfor %}
            <br />
            <input type="submit" value="Submit" />
        </form>
    </div>

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

{% endblock %}