Writing client-side scripts
Responding to events
If you want to provide additional processing of newly entered
data or have more control over user interactions with the data,
you can choose to enable events in the Web DataWindow client control.
To do so, you set the Client Events property on the Web Generation
page in the DataWindow painter or call the SetWeight method in a
server-side script.
The client control supports several events:
ButtonClicking | ItemError | RowFocusChanging |
ButtonClicked | ItemFocusChanged | UpdateStart |
Clicked | OnSubmit | |
ItemChanged | RowFocusChanged |
Most of these events have similar arguments and the same return
codes as the events of the PowerBuilder DataWindow control. For
information, see the DataWindow Reference
or
online Help.
Implementing an event
To write a script for an event of the client control, you
define a function whose name is the control name plus the event
name, separated by an underscore:
1 |
<i>HTMLGenObjectName_eventname</i> ( <i>arguments</i> ) |
The control name is the one you specified using the SetHTMLObjectName method
or the Object Name property on the Web Generation page in the DataWindow
painter. The script must be enclosed in SCRIPT tags. You can include
client methods in the script if client scripting is enabled (described next).
This example prevents focus from changing if the user tries
to go back to an earlier row. In this case the name of the DataWindow
control is dwMine:
1 |
<SCRIPT Language=JavaScript> |
1 |
function dwMine_RowFocusChanging(curRow, newRow) |
1 |
{ |
1 |
if (newRow < curRow) { return 1; } |
1 |
} |
1 |
</SCRIPT> |
You can put the script anywhere in your Web page template.
If you are using a Web target, you do not need to define a function
to wrap your event code. You can code client-side events directly
in the editor by selecting the DataWindow control name in the leftmost
drop-down list in the toolbar and the event name in the center drop-down
list.
Calling client methods
To write scripts that call methods of the client control,
you must enable client scripting. To do so, you can set the Client
Scriptable property in the DataWindow painter or call the SetWeight
method in a server-side script.
Several client methods accomplish the same tasks as actions
of Button controls. If your DataWindow object uses Button controls
to implement scrolling and updating, you might not need to do any
client scripting.
You can use the following methods on the client (methods marked
with an asterisk force the Web page to be reloaded):
AcceptText | GetItem | ScrollPriorPage * |
DeletedCount | GetItemStatus | SetItem |
DeleteRow * | InsertRow * | SetColumn |
GetClickedColumn | ModifiedCount | SetRow |
GetClickedRow | Retrieve * | SetSort |
GetColumn | RowCount | Sort * |
GetFullContext | ScrollFirstPage * | Update * |
GetNextModified | ScrollLastPage * | |
GetRow | ScrollNextPage * |
GetNextModified The GetNextModified method finds modified rows in the current
page only.
For information about these methods, see the DataWindow
Reference
or online Help.
This example includes a form with a button that causes data
to be updated on the server:
1 |
<FORM NAME="update"> |
1 |
<INPUT type="button" value="Update" onClick="{dwMine.Update();}"> |
Note that you can get the same functionality with the Update
action for a Button control in the DataWindow object.
Multiple DataWindows on a page
If you have multiple updatable Web DataWindows on the same
Web page, you can script the OnSubmit client-side event to synchronize
them before the changes on the page are submitted. You call the
GetFullContext method to get a string that represents the context
of the client side control that would be passed on a submit, and
transfer the context to the other DataWindow control.
To enable the second DataWindow to create the required fields
on the submit form, each of the DataWindows must have two arguments
defined as self-link arguments:
1 |
dw_1.SetSelfLink(document.name, |
1 |
"dw_2_context=''|dw_2_action=''") |
1 |
dw_2.SetSelfLink(document.name, |
1 |
"dw_1_context=''|dw_1_action=''") |
This client-side script transfers the context and action from
dw_2 to dw_1 when dw_1 is submitted,
and from dw_1 to dw_2 when dw_2 is submitted:
1 |
<SCRIPT> |
1 |
function dw_1_OnSubmit() |
1 |
{ |
1 |
dw_1.submitForm.dw_2_context.value = |
1 |
dw_2.GetFullContext(); |
1 |
dw_1.submitForm.dw_2_action.value = ""; |
1 |
} |
1 |
1 |
function dw_2_OnSubmit() |
1 |
{ |
1 |
dw_2.submitForm.dw_1_context.value = |
1 |
dw_1.GetFullContext(); |
1 |
dw_2.submitForm.dw_1_action.value = ""; |
1 |
} |
1 |
</SCRIPT> |