jQuery Controls: Adding Actions

In the previous example, you saw the breadth of the JQuery UI controls; now let's dive in and see how to use them.

These widgets are still QCubed controls - for example, the fancy-looking Jqui\Button is still a Button, and you can easily attach event handlers to it using AddAction(). The following examples show possibilities to post data back to the server.

There are three ways to return JavaScript objects / arrays to the server side on Ajax/Server actions:

1. Use a Closure as an ActionParameter: pass a string containing the JavaScript to return an object/array to the constructor of Closure. Note that a Closure actually creates a function - so a return statement should be included! For example:
   $objControl->ActionParameter = new \QCubed\Js\Closure("return this.id;");
2. Pass the string defining the JavaScript object to Ajax, Server, AjaxControl or ServerControl actions as the last parameter. For example:
   $strJsParam = '{
    "width": $j("#' . $this->Resizable->ControlId . '").width(),
    "height": $j("#' . $this->Resizable->ControlId . '").height()
}';
$objControl->AddAction(new ResizableStop(), new Ajax("onResize", "default", null, $strJsParam));

3. Create a custom event derived from EventBase that has a constant property called JsReturnParam, e.g.

   
    class MyQSlider_ChangeEvent extends \QCubed\Event\EventBase {
   
   	const EVENT_NAME = 'slidechange';
   
   	const JS_RETURN_PARAM = 'arguments[1].value';
   
   }
                    

View the source of this example to see all three approaches in action.

NOTE: An object/array JavaScript string passed as a parameter to an action overrides the JsReturnParam of the event and the ActionParameter (if defined). A JsReturnParam defined by an event overrides the ActionParameter (if defined).