Skip to content

Instantly share code, notes, and snippets.

@felipe-prenholato

felipe-prenholato/test_selectable.html

Last active December 11, 2015 13:59
Show Gist options
  • Save felipe-prenholato/4611325 to your computer and use it in GitHub Desktop.
Save felipe-prenholato/4611325 to your computer and use it in GitHub Desktop.
Download ZIP
selectable crazy enter bug (or autocomplete, but lets see...)
Raw
test_selectable.html
<!DOCTYPE html>{% load staticfiles %}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Html5</title>
<link rel="stylesheet" href="{% static 'js/jquery-ui/css/smoothness/jquery-ui-1.9.1.css' %}" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
{{ form.media }}
{% comment %}
<script type="text/javascript">
function fixSelectableEnterKeypress() {
var f = $("input[data-selectable-type]").closest('form').not("key-binded")
// this is a hack to make forms submit on press ENTER instead focus on first django selectable field
// TODO: Fix it in IE
function doit(e) {
if (!e) var e = window.event;
$(this).addClass('key-binded')
if (e.keyCode == 13) {
// IE8 has issues with preventDefault
(e.preventDefault) ? e.preventDefault() : e.returnValue = false;
e.cancelBubble = true;
// yes I'm crazy
if (e.stopPropagation) e.stopPropagation();
if (e.stopImmediatePropagation) e.stopImmediatePropagation();
// paranoic mode, break all FOCUS events
$('input').focus(function(ee) {
if (!ee) var ee = window.event;
(ee.preventDefault) ? ee.preventDefault() : ee.returnValue = false;
ee.cancelBubble = true;
if (ee.stopPropagation) ee.stopPropagation();
if (ee.stopImmediatePropagation) ee.stopImmediatePropagation();
return false;
})
if (this.tagName === 'INPUT') {
$(this).closest('form').find('[type=submit]').click()
} else {
$("[type=submit]", this).trigger('click');
}
return false;
}
}
$(f).keypress(doit);
$('input', f).keypress(doit);
}
$(document).ready(function() { fixSelectableEnterKeypress() })
</script>
{% endcomment %}
</head>
<body>
<form action=".">
<table>
{{ form.as_table }}
</table>
</form>
</body>
</html>
Raw
views.py
# -*- coding: utf-8 -*-
from __future__ import (absolute_import, division, unicode_literals)
from django.shortcuts import render_to_response
from selectable.forms.widgets import AutoCompleteSelectWidget, AutoComboboxSelectWidget
from selectable.forms.fields import AutoCompleteSelectField
def make_autocombobox(lookup_class, attrs={}, combobox=True, **kw):
"""
Wrapper to create a autocomplete combobox.
TODO: move to common.utils or common.forms.utils
"""
attributes = {'placeholder': 'Type and select from list',
'data-autocomplete-opts': simplejson.dumps({'autoFocus': True})}
attributes.update(attrs)
widget = AutoComboboxSelectWidget if combobox else AutoCompleteSelectWidget
return AutoCompleteSelectField(lookup_class=lookup_class,
widget=widget(lookup_class, attrs=attributes), **kw)
def test_selectable(request):
from django import forms
from .lookups import Lookup1, Lookup2, Lookup3
class MyForm(forms.Form):
selectable1 = make_autocombobox(Lookup1)
selectable2 = make_autocombobox(Lookup2)
birth = forms.DateField()
something = forms.CharField()
selectable3 = make_autocombobox(Lookup3)
if request.method == 'POST':
form = MyForm(request.POST)
form.is_valid()
else:
form = MyForm()
return render_to_response('test_selectable.html', {'form': form}, context_instance=RequestContext(request))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment