JavaScript#

class alfred3.element.misc.JavaScript(code: Optional[str] = None, url: Optional[str] = None, path: Optional[str] = None, priority: int = 10)[source]#

Bases: alfred3.element.core.Element

Adds JavaScript to a page.

Javascript can be used to implement dynamic behavior on the client side.

Parameters

code – Javascript code.
url – Url to Javascript code.
path – Path to a .js file.
priority – Controls the order in which Javascript code is placed on a page. Lower numbers are included first. Can be useful, if you have trouble with overriding code. In everyday use, it’s fine to stick with the default.

Notes

You can use the jquery API (version 3.5.1 as of 2021-01-20).

See also

See Element.css_class_element and Element.css_class_container for information on element CSS classes and IDs.
The method Element.add_js() can be used to add JS to a specific element.

Examples

In this example, we use JavaScript to create a text element that will lead to automatic submission of the current page, when a change to its input is detected:

import alfred3 as al
exp = al.Experiment()

@exp.member
class HelloWorld(al.Page):
    name = "hello_world"

    def on_exp_access(self):

        js_code = '''
        $( '#test_el' ).on('change', function() {
            move('forward') // the move() JavaScript function is provided by alfred3.
        })
        '''

        self += al.JavaScript(code=js_code)
        self += al.TextEntry("Element 1", name="test_el")

Methods

`add_css`	Adds CSS to the element.
`add_js`	Adds Javascript to the element.
`added_to_experiment`	Tells the element that it was added to an experiment.
`added_to_page`	Tells the element that it was added to a page.
`prepare_web_widget`	Hook for computations for preparing an element's web widget.
`render_inner_html`	Renders the element template `element_template`.

Attributes

`base_template`	Base template for the element, which will be used to hold the rendered element template.
`converted_width`	List of bootstrap column widths at different screen sizes.
`css_class_container`	Returns the name the element container's CSS class.
`css_class_element`	Returns the name of the element's CSS class.
`css_code`	A list of tuples, which contain a priority and CSS code.
`css_urls`	A list of tuples, which contain a priority and an url pointing to CSS code.
`display_standalone`	If True (default), the element will be displayed as usual on its own.
`element_template`	The element's specific, inner template.
`element_width`	Returns a string of column width definitions.
`exp`	The experiment session to which this element belongs.
`experiment`	Alias for `exp`
`font_size`	Font size
`js_code`	A list of tuples, which contain a priority and Javascript.
`js_urls`	A list of tuples, which contain a priority and an url pointing to JavaScript.
`name`	Unique identifier for the element.
`page`	The page to which this element belongs.
`position`	Position of the whole element on the page.
`section`	The direct parent section of this element's page.
`short_tree`	String, giving the exact position in the experiment.
`should_be_shown`
`showif`	Conditions that have to be met for the element to be shown.
`template_data`	Dictionary of data to be passed on to jinja templates.
`tree`	String, giving the exact position in the experiment.
`web_widget`
`width`	Element width