How jQXB handles change events.

jQXB provides some events so that the developer is able to intercept them to perform certain actions.

The two main onBeforeUpdate and onAfterUpdate events are generated before a control HTML saves its value
in the datasource that is bound to and just after the same value has been changed within the same datasource.
The steps in the lifecycle management events are essentially two.
1) attach a handler to the event by providing a function as a call back
2) Treat the event within the function passed to the event.

The ideal point for attaching a function to an event is in the initialization routine, which normally is defined inside the function jQuery (document) ready ()

With the function jQXB.addOnBeforeUpdatehnd(handler) will be passed to a handler whose signature must be of type

function (datasourceName, occurrency, member, internalVarmember, value) where: 

  • datasourceName is the name of the datasource that is going to be changed.
  • occurrency is the index of the nth element that is being modified or null if the datasource contains a single object.
  • member is the reference to the Member that is about to be changed with the new value
  • internalVarMember is the path specified in the Declaration (jqxb – datamamber)
  • value is the value that is assigned to the Member

The function can return a Boolean, if set to true, the assignment operation will be cancelled. 

With jQXB.addOnafterUpdatehnd(handler) function can be also added an additional handler that will be activated at the end of the operation assignment of new value. The signature of the method is the same even if the values passed differ slightly as the Member

will contain the new value and the eventual return Boolean is ignored.

Html declarations

 

    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Name" />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Surname" />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.Street" />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.ZipCode" />
    <table>
        <thead>
            <tr>
                <th>Prefix</th>
                <th>Number</th>
            </tr>
        </thead>
        <tbody jqxb-templatecontainer="addressTemplate" jqxb-datasource="mydataDetails">
            <tr jqxb-template="addressTemplate" jqxb-templateitemidprfx="addressrow" style="display: none;">
                <td><input type="text"  jqxb-itemdatamember="prefix" /></td>
                <td><input type="text"  jqxb-itemdatamember="number" /></td>
            </tr>
        </tbody>
    </table>

 

jQXB code

 

    <script type="text/javascript">
        var Customer = { 'Name': 'Anthony',
            'Surname': 'Murray',
            'Address': { 'Street': 'Carnaby Street', 'ZipCode': 'YTSCH',
                'Phones': [{ 'prefix': 010, 'number': 23094895 },
                            { 'prefix': 0185, 'number': 2930940 }, 
                            { 'prefix': 03485, 'number': 3234567}] },
            'MonthlyAmount': [13498, 23456, 12345, 12345, 38728, 0, 34231, 39748.95, 34534, 2134, 567, 666, 345]
        };
        // Common jQuery entry point
        jQuery(document).ready(function () {
            // Initialize the System
            jQXB.initialize();
            jQXB.setDataSource('mydata', Customer).doBind('mydata');
            // Creat a new DataSource for template ( data are shared between the two datasources )
            jQXB.setDataSource('mydataDetails', Customer.Address.Phones).doBind('mydataDetails');
            // Register before change event
            jQXB.addOnBeforeUpdatehnd(function (datasourceName, occurrency, currValuemember, memberPath, newValue) {
                switch (datasourceName) {
                    case 'mydata':
                    case 'mydataDetails':
                        alert("data is changing");
                        break;

                }
            });
            // register after change event
            jQXB.addOnAfterUpdatehnd(function (datasourceName, occurrency, currValuemember, memberPath, newValue) {
                switch (datasourceName) {
                    case 'mydata':
                    case 'mydataDetails':
                        alert("data is changed");
                        break;
                }
            });
        });

    </script>

Last edited Jul 27, 2011 at 10:45 PM by lightcode, version 10

Comments

No comments yet.