Skip to content

Autocomplete popup table data flow

Elucidation edited this page Jul 1, 2011 · 4 revisions

Alright, so there's a popup table.

The request

User tabs into or clicks the environment option field (there will be 3, one for config, one for build and one for run, or maybe could combine) This begins the popup table spree, starting with an empty line so the table will be full, it'll just back and forth asynchronous requests and keep updating the table. Some major user-accessible requirements are that one can press escape to close the popup box, or enter to select the first option, and the up/down arrows or tab key to select options without using a mouse. Todo.

The fields in index are set onkeyup to call doAutoComplete(<config/build/run>) when typing in the box.

This function in javascript will then send a complete action request to fillTemplate of the correct type.

From this point the async request is sent to fillTemplate, which passes on a request for all valid entries from the respective table via template.getReducedXMLList( <current value in field> , <"config"/"build"/"run"> )

The return trip (from fillTemplate to web page)

fillTemplate returns an XML response with a format something like this

<wrapper>
    <type>config</type>
    <tableXML>
    <option>
        <id>CICE_MODE</id>
        <name>Cice mode</name>
        <default>prognostic</default>
        <description>"cice mode [prognostic,prescribed,thermo_only]"</description>
    </option>
    ...
</wrapper>

The javascript picks this up and starts adding rows to a table on the index page with id=popupBox

<tr>
?
</tr>