Exchange data with server

jQXB provides APIs for CRUD out-of-band operations wrapping specific jQuery functionalities.

jQXB use jSON format to get and post informations. Data retrieved can be immediately associated to a datasource to get the results you have already seen in the previous examples. Don't forget you can also change dynamically the page layout with appropriate values togheter with your data!

Once you have created or modified your data you can post back information with just a command

This simple example shows how interact with two PHP pages (stub version) providing services for retrieving and storing data

Other clean and essential examples based on ASP.NET MVC (with real viewmodel) or WCF (with data-contract) can be found at codeplex

Ask Server for data...

Once you have the customer orders click "load data" more times to retrieve others data for him, pay attention to order exceeding $2500.00
Get id#:  Load data

...get the result...

Customer's data
Id
Name
Surname
Address
Order Date Number Amount
Save and Reload

...behind the scenes jQXB is simple and concise...

Simply specify the url where you can find the services and the data in your HTML page using jQXB syntax
// Set the Load Button
jQuery('#cmdLoad').bind('click', function () {
       if(jQuery('#txtCustId').val().length == 0)
       {
            alert('no customer specified');
            return;
       }
       jQXB.getJSON("getCustomer.php",
                  { id: jQuery('#txtCustId').val() },
                    function (data) {
                         jQXB.setDataSource("Customer", data).  // Bind to Master
                         setDataSource("CustOrders", data.ordersList).doBind(); // Bind to details
       });
});

// Save Button
jQuery('#cmdSave').bind('click', function () {
      jQXB.saveJSON("SaveCustomer.php",
                 jQXB.getDataSource("Customer"),
                  function (data) {
                      jQXB.setDataSource("Customer", data). // Bind to Master
                      setDataSource("CustOrders", data.ordersList).doBind(); // Bind to details
       });
});
                                            

... and it requires simple back ends

The getCustomer.php page (stub)


<?php
include_once("CustomerClass.php");
include_once("OrderClass.php");
$alert = false;
$i = $_GET['id'];
$CustomerObj = new Customer();
$CustomerObj->id = $i;
$CustomerObj->Name = 'CustomerName' . $i ;
$CustomerObj->Surname = 'CustomerSurname' . $i;
$CustomerObj->Address = "CustomerStreet" . $i;
$CustomerObj->orderType = "Orders are OK";
for($i = 0;$i < 5 ;$i++){
    $OrderObj = new Order();
    $OrderObj->number = uniqid();
    $OrderObj->date = "2011/01/01";
    $OrderObj->totalAmount = rand(0,3000);
    if($OrderObj->totalAmount > 2500)
  {
    $OrderObj->background = "background-color: #FEB177;";
    $alert = true;
  } 
  else
    $OrderObj->background = "background-color: white;";
  if($alert)
    $CustomerObj->orderType = "orders amount cannot bee over $2500.00!!";
  array_push($CustomerObj->ordersList,$OrderObj);
}
print(json_encode($CustomerObj));
?>

                                            

The SaveCustomer.php page (stub)

<?
$data = file_get_contents('php://input');
$Customer = json_decode($data,true);
$Customer['Name'] = $Customer['Name'] . "Just Saved";
$Customer['Surname'] = $Customer['Surname'] . "Just Saved";
$Customer['Address'] = $Customer['Address'] . "Just Saved";
$Customer['orderType'] = "Orders are OK!";
for($i = 0; $i < sizeof($Customer['ordersList']); ++$i)
{
   $Customer['ordersList'][$i]['background'] = "background-color: white;";
   if($Customer['ordersList'][$i]['totalAmount'] > 2500)
   {
	$Customer['orderType'] = "orders amount cannot bee over $2500.00!!";
	$Customer['ordersList'][$i]['background'] = "background-color: #FEB177;";
   }
}
print(json_encode($Customer));
?>