Skip to content

Dropdown and Select Elements

Jump to bottom
Ralf Bitter edited this page May 20, 2023 · 1 revision

The Controller

The View

Dropdown Version

Calling the Controller Handlers from Global JavaScript

The following example shows how dropdown and select elements are handled.

The Controller

The controller asynSelect.lc loads the ASYNergy library and the asynSelectView.lc view.

The initial value of the dropdown / select element is stored in the gData variable.

There is a name handler that is called by entering text in an <input> field and a greeting handler that is called by selecting values in a dropdown element, respectively a select element.

<?lc

put "asynSelect,index,name,greeting" into gControllerHandlers


command asynSelect
  rigLoaderLoadLibrary "ASYNergy"
end asynSelect


command index
  put "Hello" into gData["greeting"]

  get rigLoadView("asynSelectView")
end index


command name
  rigAsynRespond "{{name}}"
end name


command greeting
  local tModelValue, tKey, tResponse

  put rigAsynElemData("greeting") into tModelValue
  
  if tModelValue is an array then
    # SELECT ELEMENT
    repeat for each key tKey in tModelValue
      put tModelValue[tKey] & ", " after tResponse
    end repeat

    put char 1 to -3 of tResponse into tResponse

  else
    # DROPDOWN ELEMENT
    put tModelValue into tResponse
  end if

  rigAsynRespond tResponse
end greeting

The name handler returns the text entered in the <input> field as response. The greeting handler processes the value of the dropdown / select element, which is an array in the case of a select element, and a string in the case of a dropdown element. This handler sends one or more comma delimited strings to the client.

The View

The view includes an <input> field, a select element and a paragraph with two <span> elements that have an asyn:mutable directive.

The gData variable [[gData["asynergyScript"] ]] is used to load the ASYNergy JavaScript framework.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>

    <div style="float: left;margin-right: 20px;">

      <input asyn:model="name" type="text">
      
      <select name="greeting" asyn:model="greeting" multiple>
        <option value="Adios">Adios</option>
        <option value="Goodby">Goodby</option>
        <option value="Hello" selected="selected">Hello</option>
      </select>

    </div>
        
    <div>

      <p><span asyn:mutable="greeting">[[gData["greeting"] ]]</span> 
        <span asyn:mutable="name"></span></p>

    </div>

    [[gData["asynergyScript"] ]]
  </body>
</html>

As the user types into the <input> field, requests are sent to the server calling the name handler to update the text enclosed by the second <span> element. By changing the selection of the select element, a request is sent that calls the greeting handler that returns the text to be enclosed by the first <span> element.

Dropdown Version

Just remove the multiple attribute from the select element to turn the select element into a dropdown element. The code still works without anny further modifications.

Calling the Controller Handlers from Global JavaScript

To call the name handler of the revIgniter controller from global JavaScript use the ASYNergy.emit method, such as:

<script>

  ASYNergy.emit('name', '', 'Jane Doe');

</script>

The argument of the third event parameter is the value that will be added to the payload of the request as "model" value.

To call the greeting handler from global JavaScript use the ASYNergy.emit method, such as:

<script>

  ASYNergy.emit('greeting', '', 'Goodby,Hello');

</script>

In this case the third event parameter is a comma delimited list of select element values that will be converted into an array once processed by the revIgniter ASYNergy library.

ASYNergy USER GUIDE

Clone this wiki locally