Text Edit (DHTMLSuite.textEdit)

DHTML Suite - article index

Specifications

• Widget/Class name: DHTMLSuite.textEdit
• Demo: demo-text-edit.html
• Css: [THEMES_FOLDER]/css/text-edit.css

Configuration

This widget makes standard HTML element editable. Changes done to the elements are sent to the server with Ajax.

In the demo, we have this table:

<table>
  <tr>
    <td><b>Name</b></td>
    <td><b>Value</b></td>
  </tr>
  <tr>
    <td><label id="labelName">Name:</label></td>
    <td><div id="name">John Doe</div></td>
  </tr>
  <tr>
    <td><label id="labelGender">Gender:</label></td>
    <td><div id="gender">Male</div></td>
  </tr>
  <tr>
    <td><label id="labelIncome">Income:</label></td>
    <td><div id="income"></div></td>
  </tr>  
</table>

We want to make name, gender and income editable. We want to use a standard text input for the name, while income and gender should be picked from a select list.

The first we do is to create the datasource for our select boxes, gender and income. This can be done by 1) creating the select box markup and 2) create the listModel objects and point them to the select boxes.

These are the select boxes:

<select id="datasource_list">
  <option value="f">Female</option>
  <option value="m">Male</option>
</select>
<select id="datasource_list2">
  <option value="1">0 - 20000</option>
  <option value="2">20000 - 30000</option>
  <option value="3">40000 - 50000</option>
  <option value="4">60000 - 100000</option>
  <option value="5">100000 - </option>
</select>

This is the datasource. Now, we create two listModel objects and point them to these two select boxes.

var listModelGender = new DHTMLSuite.listModel();
listModelGender.createFromMarkupSelect('datasource_list');
var listModelIncome = new DHTMLSuite.listModel();
listModelIncome.createFromMarkupSelect('datasource_list2');

The createFromMarkupSelect method will parse the select box and then hide it afterwards. Argument to this method is the id of the select box.

Now, we create our textEdit object and add elements to it:

var textEditObj = new DHTMLSuite.textEdit(); // Create new textEdit object
textEditObj.setServersideFile('includes/saveTextEdit.php'); // Specify server side file
textEditObj.addElement( { labelId: 'labelName',elementId: 'name' } ); // Add element
textEditObj.addElement( { labelId: 'labelGender',elementId: 'gender',listModel:listModelGender } ); // Add element
textEditObj.addElement( { labelId: 'labelIncome',elementId: 'income',listModel:listModelIncome } ); // Add element
textEditObj.init();

The setServersideFile method specifies where changes will be sent. A request to this file is sent when you exit edit mode. Three variables are sent to this file:

1. saveTextEdit - Set to "1"
2. textEditElementId - The id of the modified element
3. textEditValue - New value of this element.

This server side file should save changes to the database and output "OK" when everything worked as it should. demos/includes/saveTextEdit.php shows you an example how to save changes from this widget.

the addElement method is used to add new editable elements. It takes only one argument, which is an associative array, describing the editable element. The keys in this array are:

• labelId : Id of label (optional)
• elementId: Id of editable element
• serverFile: Alternative server side file for this element(Optional)
• listModel: Reference to a DHTMLSuite.listModel object(Optional). We will specify this key for gender and income in our example above.

Finally, the init() method is called to initialize the widget.