How to Implement Custom Event Handlers

rnwWidget object contains a list of all events. Have a look at rnwWidget.constants.events. It depends on the widget which of these events are available. Compare the following snippets to see which events are supported in which widgets.

Bre2

<script type="text/javascript">
    window.rnwWidget.constants.events.WIDGET_LOADED;
    window.rnwWidget.constants.events.AMOUNT_CHANGED;
    window.rnwWidget.constants.events.PAYMENT_COMPLETE;
    window.rnwWidget.constants.events.VALIDATING_PARAMETERS;
    window.rnwWidget.constants.events.VALIDATION_ERROR;
</script>

Lema

<script type="text/javascript">
    window.rnwWidget.constants.events.WIDGET_LOADED;
    window.rnwWidget.constants.events.PAGE_LOADED;
    window.rnwWidget.constants.events.AMOUNT_CHANGED;
    window.rnwWidget.constants.events.PURPOSE_CHANGED;
    window.rnwWidget.constants.events.PAYMENT_METHOD_CHANGED;
    window.rnwWidget.constants.events.DONATION_TYPE_CHANGED;
    window.rnwWidget.constants.events.BEFORE_SUBMIT;
    window.rnwWidget.constants.events.INTERVAL_CHANGED;
    window.rnwWidget.constants.events.PAYMENT_COMPLETE;
    window.rnwWidget.constants.events.PROCESS_FORM;
    window.rnwWidget.constants.events.VALIDATING_PARAMETERS;
    window.rnwWidget.constants.events.VALIDATION_ERROR;
    window.rnwWidget.constants.events.SUBSCRIPTION_EDIT_COMPLETE
</script>

Tamina

<script type="text/javascript">
    window.rnwWidget.constants.events.WIDGET_LOADED;
    window.rnwWidget.constants.events.SEARCH_RESULT_LOADED;
</script>

When the specified event has been triggered, a jQuery event object is given over as an argument. Depending on the event, this object argument contains the following extra information:

• type := the specified event type

• widget := the widget instance

• value := depends on the event, for example the donated amount, the payment method or the donation interval

• error := description of the error

• errorList := lists all the objects with a validation error in an array

• computedFields := shows the object containing the dynamically added fields

• payment := payment object containing all parameters of the payment which are returned from the platform

• paymemtStatus:= prints the status of the payment (e.g. aborted, success)

The following snippets show how to register a custom event handler for the defined events:

Example for the event WIDGET_LOADED

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.widget.on(window.rnwWidget.constants.events.WIDGET_LOADED, function(event) {
            console.log("The widget is loaded, please go on with your donation");
            console.log(event);
        });
    });
</script>

This event is triggered after the whole content of your widget is loaded. In this example, a note as well as the jQuery event object containing all the information are logged to your console.

Example for the event PAGE_LOADED

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
     window.rnwWidget.configureWidget.push(function(options) {
           options.widget.on(window.rnwWidget.constants.events.PAGE_LOADED, function(event) {
            console.log(event);
        });
     });
</script>

This event is triggered when the whole content of your page is loaded.

Example for the event AMOUNT_CHANGED

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.widget.on(window.rnwWidget.constants.events.AMOUNT_CHANGED, function(event) {
            console.log(event.value);
        });
    });
</script>

This event is triggered after the donation amount has been changed. The parameter event.value contains the new amount (in cents).

Example for the event PURPOSE_CHANGED

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
     window.rnwWidget.configureWidget.push(function(options) {
        options.widget.on(window.rnwWidget.constants.events.PURPOSE_CHANGED, function(event) {
            console.log(event);
            console.log(event.purposeTitle);
            console.log(event.campaignId);
               console.log(event.campaignSubId);
            console.log(event.value);
           });
    });
</script>

This event is triggered if the purpose of the donation has been changed. The parameter event.value contains the value of the input field called stored_purpose. The parameter event.purposeTitle, event.campaignId, event.campaignSubId are values set in the widget translations.

Example for the event PAYMENT_METHOD_CHANGED

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
     window.rnwWidget.configureWidget.push(function(options) {
           options.widget.on(window.rnwWidget.constants.events.PAYMENT_METHOD_CHANGED, function(event) {
            console.log(event.value);
         });
     });
</script>

This event is triggered after the payment method has been changed. The parameter event.value contains the current selected payment method.

Example for the event DONATION_TYPE_CHANGED

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.widget.on(window.rnwWidget.constants.events.DONATION_TYPE_CHANGED, function(event) {
            console.log(event);
            console.log(event.value);
        });
    });
</script>

This event is triggered after the donation type (one-time or recurring donation) has been changed. The parameter event.value contains either value true or false depending on the type of the donation: the value true defines recurring whereas false defines a one-time donation.

Example for the event INTERVAL_CHANGED

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.widget.on(window.rnwWidget.constants.events.INTERVAL_CHANGED, function(event) {
            console.log(event);
            console.log(event.value);
        });
    });
</script>

This event is triggered after the interval of a recurring donation has been changed. The parameter events.value contains the interval of the donation, e.g. monthly.

Example for the event BEFORE_SUBMIT

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.widget.on(window.rnwWidget.constants.events.BEFORE_SUBMIT, function(event) {
            console.log(event);
            console.log(event.computedFields);
        });
    });
</script>

This event is triggered after the donor submitted the completed form and before the donation has been initiated. The parameter event.computedFields contains fields which are dynamically created from other parameters, e.g. birthdate.

Example for the event PAYMENT_COMPLETE

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.widget.on(window.rnwWidget.constants.events.PAYMENT_COMPLETE, function(event) {
            console.log(event);
            console.log(event.payment);
            console.log(event.paymentStatus);
        });
    });
</script>

This event is triggered after the payment has been completed, no matter if successfully or not. The parameter event.paymentStatus contains the status of the payment. The parameter event.payment is an object containing all returned parameters.

Example for the event PROCESS_FORM

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.widget.on(window.rnwWidget.constants.events.PROCESS_FORM, function(event) {
            console.log(event);
            console.log(event.computedFields);
        });
    });
</script>

This event is triggered when the form is processed.

Example for the event VALIDATING_PARAMETERS

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.widget.on(window.rnwWidget.constants.events.VALIDATING_PARAMETERS, function(event) {
            console.log(event);

        });
    });
</script>

This event is triggered before validating the current form.

Example for the event VALIDATION_ERROR

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.widget.on(window.rnwWidget.constants.events.VALIDATION_ERROR, function(event) {
            console.log(event.error);
            console.log(event.errorList);

        });
    });
</script>

This event is triggered if the validation of the completed fields returns an error. In this example, the error message as well as the list with all the errors are logged in your console.

Example for the event SUBSCRIPTION_EDIT_COMPLETE

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.widget.on(window.rnwWidget.constants.events.SUBSCRIPTION_EDIT_COMPLETE, function(event) {
            console.log(event.paymentStatus);
            console.log(event.payment);

        });
    });
</script>

This event is triggered after a recurring payment has been modified, no matter if successfully or not. The parameter event.paymentStatus contains the status of the payment. The parameter event.payment is an object containing all returned parameters.

Example for the event SEARCH_RESULT_LOADED

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {

        //Target level in CHF
        options.barometerTargetLevel = 2500;

        //Search sub query, please do not use whitespace or special characters or camelCase in key and value
        options.searchQuery = [{'stored_campaigner_name' : 'foobar'}];

        options.widget.on(window.rnwWidget.constants.events.SEARCH_RESULT_LOADED, function (e) {
            //Current level
            alert("current level " + e.level);

            //Add CHF 100.- to current level, e.g. to add offline donations
            e.widget.setLevel(100 + e.level);
        });

    });
</script>

This event is only supported by the widget Tamina. It is triggered if the searched sub query is loaded. In this example, CHF 100.- is added to the current donation level.