Select Input

Last Updated: August 10, 2015

class tethys_sdk.gizmos.SelectInput(name, display_text='', initial=None, multiple=False, original=False, select2_options=None, options='', disabled=False, error='', success='', attributes=None, classes='')

Select inputs are used to select values from an given set of values. Use this gizmo to create select inputs and multi select inputs. This uses the Select2 functionality.

display_text

Display text for the label that accompanies select input

Type:

str

name

Name of the input element that will be used for form submission

Type:

str, required

multiple

If True, select input will be a multi-select

Type:

bool

original

If True, Select2 reference functionality will be turned off

Type:

bool

select2_options

Select2 options that will be passed when initializing the select2.

Type:

dict

options

List of tuples that represent the options and values of the select input

Type:

list

initial

List of keys or values that represent the initial selected values or a string representing a singular initial selected value.

Type:

list or str

disabled

Disabled state of the select input

Type:

bool

error

Error message for form validation

Type:

str

success

Success message for form validation

Type:

str

attributes

A dictionary representing additional HTML attributes to add to the primary element (e.g. {"onclick": "run_me();"}).

Type:

dict

classes

Additional classes to add to the primary HTML element (e.g. "example-class another-class").

Type:

str

Controller Example

python
from tethys_sdk.gizmos import SelectInput

select_input2 = SelectInput(display_text='Select2',
                            name='select2',
                            multiple=False,
                            options=[('One', '1'), ('Two', '2'), ('Three', '3')],
                            initial=['Three'],
                            select2_options={'placeholder': 'Select a number',
                                             'allowClear': True})

select_input2_multiple = SelectInput(display_text='Select2 Multiple',
                                     name='select21',
                                     multiple=True,
                                     options=[('One', '1'), ('Two', '2'), ('Three', '3')],
                                     initial=['Two', 'One'])

select_input2_error = SelectInput(display_text='Select2 Disabled',
                                  name='select22',
                                  multiple=False,
                                  options=[('One', '1'), ('Two', '2'), ('Three', '3')],
                                  disabled=True,
                                  error='Here is my error text')

select_input = SelectInput(display_text='Select',
                           name='select1',
                           multiple=False,
                           original=True,
                           options=[('One', '1'), ('Two', '2'), ('Three', '3')],
                           initial=['Three'])

select_input_multiple = SelectInput(display_text='Select Multiple',
                                    name='select11',
                                    multiple=True,
                                    original=True,
                                    options=[('One', '1'), ('Two', '2'), ('Three', '3')])


context = {
            'select_input2': select_input2,
            'select_input2_multiple': select_input2_multiple,
            'select_input2_error': select_input2_error,
            'select_input': select_input,
            'select_input_multiple': select_input_multiple,
          }

Template Example

python
{% gizmo select_input2 %}
{% gizmo select_input2_multiple %}
{% gizmo select_input2_error %}
{% gizmo select_input %}
{% gizmo select_input_multiple %}

AJAX

Often dynamically loading in a select input can be useful. Here is a description of how to do so with the SelectInput gizmo.

Note

In order to use this, you will either need to use a SelectInput gizmo on the main page or register the dependencies in the main html template page using the import_gizmo_dependency tag with the select_input name in the import_gizmos block.

For example:

python
{% block import_gizmos %}
    {% import_gizmo_dependency select_input %}
{% endblock %}

Four elements are required:

1) A controller for the AJAX call with a SelectInput gizmo.

python
from tethys_sdk.gizmos import SelectInput

@login_required()
def select_input_ajax(request):
    """
    Controller for the bokeh ajax request.
    """
    select_input2 = SelectInput(display_text='Select2',
                                name='select2',
                                multiple=False,
                                options=[('One', '1'), ('Two', '2'), ('Three', '3')],
                                initial=['Three'])

    context = {'select_input2': select_input2}

    return render(request, 'app_name/select_input_ajax.html', context)

2) A template for with the tethys gizmo (e.g. select_input_ajax.html)

python
{% load tethys_gizmos %}

{% gizmo select_input2 %}

3) A url map to the controller in app.py

python
...
    UrlMap(name='select_input_ajax',
           url='app_name/select',
           controller='app_name.controllers.select_input_ajax'),
...

  1. The AJAX call in the javascript

Note

You only need to call the init function if you are using select2.

python
$(function() { //wait for page to load

    $.ajax({
        url: 'select',
        method: 'GET',
        success: function(data) {
            // add to page
            $("#select_div").html(data);
            // initialize if using select2
            $("#select_div").find('.select2').select2();
        }
    });

});