...
| Info |
|---|
|
...
| Tip |
|---|
|
...
It is possible to associate a custom JavaScript handler to any form control. You can provide this JavaScript as part of a custom theme in a file called custom.js. If it is present, this file will be automatically loaded for any form that uses the theme in question and all JavaScript handlers in the file will be available to the form. The custom.js file for forms will contain JavaScript code that looks something like:<pre> var CustomEventHandlers = { setup: function
| Code Block |
|---|
var CustomEventHandlers = { setup: function (el) |
...
{ if (CustomView.hasClass(el, 's-submit')) |
...
FEvent.observe(el, 'click', this.submitClicked.bindAsObserver(this,el)); |
...
else if (CustomView.hasClass(el, 'my-class')) |
...
FEvent.observe(el, 'change', this.myHandler.bindAsObserver(this,el)); |
...
}, submitClicked: function (evt, el) |
...
{ alert ('Submit button was clicked'); |
...
}, myHandler: function (evt, el) |
...
{ alert ('My Class change handler called'); |
...
}, onSaveSuccess: function (submissionId) |
...
{ alert ("Save complete. New submission id is: " + |
...
submissionId);
},
onSaveFailure: function () {
alert ("Save failed");
}
} |
Let's look in a little more detail #
- You must have a class called CustomEventHandlers declared. Note that it is case-sensitive.
...
- It must have a method called setup() which takes a single argument (called el above). When the form is loaded, frevvo will call this setup() method for each control in the form and will pass in the control as the argument.
...
- For each control we are interested in, the CustomEventHandlers class has a handler method. All handlers are functions that take two arguments: the event that triggered the handler and the control itself.
...
- The example above uses a custom CSS class on the control in question to figure out if it's the control we are interested in. You can [[V4_Designing_Forms#CSS_Class | set a custom CSS class for any control]] in the Form Designer.
...
- We're interested in two controls: the Submit button which already has a CSS class s-submit and a user-defined input control with custom CSS class my-class. For each control, we've associated a handler as described above. To associate a handler, call FEvent.observe (el, EVENT_NAME, handler) using the syntax above. The EVENT_NAME can be any standard event fired by your browser e.g. click (also called onClick) or change (also called onChange).
...
- When the event is question is fired by the control in question, your handler will be called.
...
- In addition to the event handlers, you can also provide methods that are called when the form is Saved using [[V4_Using_Forms#Save.2FLoad | the Save/Load feature]].
...
- The onSaveSuccess() method is called when a submission is saved and the resulting submission ID is passed in.
...
- The onSaveFailure() method is called when the save fails.
...
What can you do in a handler
...
You can call any JavaScript code in a handler; you can access the DOM of the page (note that you only have access to the DOM of the iframe in which the frevvo form is rendered assuming you're using a standard embedding) or call external code. In addition, you have access to the following methods: #
- CustomView.$frevvoControl(el) returns the HTML element corresponding to the frevvo control that triggered the handler. This is typically a DIV HTML element and typically has CSS class 'f-control'
...
- CustomView.getState (el) returns the state of the control as a JavaScript object. The state contains things like the label, value, hint, help etc. Use a tool such as Firebug or a different JavaScript debugger to view it in detail.
...
- CustomView.getExtId (el) returns [[V4_Designing_Forms#Name | the name of the control]] as set in the Form Designer.
...
- CustomView.getIndex (el) returns the index of the control in its enclosing repeat control if the control is repeating. If the control is not repeating, it returns -1.
...
- CustomView.hasClass (el, className) returns true if the control has the indicated CSS class, false otherwise.
==== More Examples ==== You can add different event handling to your JavaScript code. This example handles click, mouseover and mouseout events to the Submit button:
...