Table Of Contents

Select Input¶

Last Updated: August 10, 2015

class tethys_sdk.gizmos.SelectInput(name, display_text='', initial=[], multiple=False, original=False, select2_options=None, options='', disabled=False, error='', attributes={}, 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

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

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

{% 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:

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

Four elements are required:

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

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)

{% load tethys_gizmos %}

{% gizmo select_input2 %}

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

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

The AJAX call in the javascript

Note

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

$(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();
        }
    });

});

Table Of Contents

Select Input
- SelectInput
- AJAX

Range Slider

Text Input