Options Demo

This demo shows how a select box with asynchronous loaded options can be realised using the class UI_HTML_Options which uses the jQuery plugin cmOptions (can be found in cmJsLib).

Example

The select box below will be filled with options loaded via AJAX.
Please note that this example is only slow for demonstration. The service point waits 1 sec to show the loading state of the box.

Current value:

PHP Code

The class UI_HTML_Options builds HTML and JavaScript code. Here is a simple example for using the class.

import( 'de.ceus-media.ui.html.Options' );
$box	= new UI_HTML_Options( 'example' );
$box->setUrl( './data.php5' );
$box->setDefaultItem( '', '- select -' );
$box->setSelectedItem( '1' );
$html	= $box->buildCode();
$script	= $box->buildScript();

HTML Code generated

<select id="example" name="example" class="cmOptions"><option value="" selected="selected">- select -</option></select>

JavaScript Code generated

jQuery(document).ready(function(){
  jQuery("select[name='example']").ajaxOptions({"url":".\/data.php5","async":true,"cache":true,"data":[],"selected":null}).show();
});

Service Example Code

The options will be loaded using AJAX/JSON. The JSON code must be an structure containing several pairs with ID and Label.

{
  "status": "data",
  "data": [
    {
      "id": 1,
      "label": "Item 1"
    }, {
    ...
      "id": 4,
      "label": "Item 4"
    }
  ]
}

HTML Includes

After loading jQuery you need to include the plugin and optional other used plugins.
For optical effects you can load the given plugin style.

<script type="text/javascript" src="//js.ceusmedia.com/jquery/cmOptions/0.3.js"></script>
<script type="text/javascript" src="//js.ceusmedia.com/jquery/color.js"></script>
<script type="text/javascript" src="//js.ceusmedia.com/jquery/cmBlitz/0.1.js"></script>
<link rel="stylesheet" type="text/css" href="//js.ceusmedia.com/jquery/cmOptions/0.3.css"/>

For more information see also the jQuery plugin cmJsLib::cmOptions which is used by UI_HTML_Options.