This project is read-only.

 

QXB provides methods to perform CRUD operations using Ajax and specifically the jQuery framework.
Together with other interfaces available on jQXB you can use your own application server as a true
RIA services provider.

The main methods available are:

jQXB.getJSON(url,object[, successcallback][, failurecallback]);


Requires the server data in jSON format with a call to GET type
  • url is the address of the page or service
  • object a javascript object containing the parameters that must be sent
  • successcallback is the function to be invoked at the end of the call
  • failurecallback is the function that will be relied on in case of error

 

jQXB.saveJSON(url,object[,successcallback][, failurecallback]);
send to the server data in jSON format with a call to POST type
  • url is the address of the page or service
  • object a javascript object that must be sent to server ( normally contained into a jQXB datasource)
  • successcallback is the function to be invoked at the end of the call
  • failurecallback is the function that will be relied on in case of error

 

jQXB. deleteJSON (url, object [, successcallback] [, failurecallback]);
DELETE makes a call to the server by sending jSON data.
  • url is the address of the page or service
  • object a javascript object  that must be sent to server  ( normally contained into a jQXB datasource)
  • successcallback is the function to be invoked at the end of the call
  • failurecallback is the function that will be relied on in case of error

Thanks to these features jQXB provides a powerful infrastructure for data management, for loading and updating from/to  the web application as you can see in the example below.

 

Html declaration

    <table>
        <thead>
            <tr>
                <th>Prefix</th>
                <th>Number</th>
            </tr>
        </thead>
        <tbody jqxb-templatecontainer="addressTemplate" jqxb-datasource="phoneNumbers">
            <tr jqxb-template="addressTemplate" jqxb-templateitemidprfx="row" style="display: none;">
                <td><input type="text"  jqxb-itemdatamember="prefix" /></td>
                <td><input type="text"  jqxb-itemdatamember="number" /></td>
                <td><input type="text"  class="rowsummary" /></td>
                <td><a href="#" class="onSelect">Click To See Data</a></td>
                <td><a href="#" class="onDelete">Delete Row</a></td>
             </tr>
        </tbody>
    </table>
    <input type="button" onclick="CustFunction.LoadCustomer(10);" value="Load customer id = 10"/>
    <input type="button" onclick="CustFunction.SaveCustomer();" value="Update Current Customer"/>
    <input type="button" onclick="CustFunction.DeleteCustomer();" value="Delete Current Customer"/>

 

jQXB code

 

<script type="text/javascript">
    
    var CustFunction = {}
    CustFunction.LoadCustomer = function (code) {
        // Load a Customer object with id = code
        jQXB.getJSON('Customer/LoadCustomer.php', { 'id': code }, function (data) { CustFunction.DisplayCustomer(data); });
    }
    CustFunction.SaveCustomer = function () {
        // Save a datasource containing a Customer Object
        jQXB.saveJSON('Customer/SaveCustomer.php', jQXB.getDataSource('customer'), function (data) { CustFunction.DisplayCustomer(data); });
    }
    CustFunction.DeleteCustomer = function () {
        // Require a deletion of a Customer Object
        jQXB.deleteJSON('Customer/DeleteCustomer.php', jQXB.getDataSource('customer'), function () { CustFunction.DisplayCustomer(new Object()); });
    }

    CustFunction.DisplayCustomer = function (custObj) {
        jQXB.setDataSource('customer',custObj).doBind('customer');
        jQXB.clearTemplateInstances('phoneNumbers').setDataSource('phoneNumbers',custObj.Address.Phones).doBind('phoneNumbers');
    }


    function newPhoneNumber() { 
        this.prefix = null;
        this.number =  null;
       };

   

    // Common jQuery entry point
    jQuery(document).ready(function () {
        // Initialize the System
        jQXB.initialize();
    });

</script>

Last edited Jul 27, 2011 at 11:50 PM by lightcode, version 11

Comments

No comments yet.