jQuery Controls: Adding Actions

QCubed offers a new set of experimental wrappers for all widgets that jQuery UI ships with. These are simple server-side classes that allow you to create PHP objects that will later on be presented as jQuery widgets.

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

These widgets are still QCubed controls - for example, the fancy-looking QJqButton is still a QButton, 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 QJsClosure as an ActionParameter: pass a string containing the JavaScript to return an object/array to the constructor of QJsClosure. Note that a QJsClosure actually creates a function - so a return statement should be included! For example:
   $objControl->ActionParameter = new QJsClosure("return this.id;");
2. Pass the string defining the JavaScript object to QAjaxAction, QServerAction, QAjaxControlAction or QServerControlAction as the last parameter. For example:
   $strJsParam = '{
    "width": $j("#' . $this->Resizable->ControlId . '").width(),
    "height": $j("#' . $this->Resizable->ControlId . '").height()
}';
$objControl->AddAction(new QResizable_StopEvent(), new QAjaxAction("onResize", "default", null, $strJsParam));

3. Create a custom event derived from QEvent that has a constant property called JsReturnParam, e.g.
   class MyQSlider_ChangeEvent extends QEvent {
    const EventName = 'slidechange';
    const JsReturnParam = '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).