Rich Ajax Application Framework

Phone Inventory

Click on an item from the list below



PHP Source:
<?php require_once 'raxan/pdi/autostart.php'; ?>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Table</title>
    <link href="raxan/styles/master.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="c35 container prepend-top">
        <h2>Phone Inventory</h2>
        <table id="inventory" class="column c20">
            <thead>
                <tr class="tbl-header">
                    <th>SKU</th><th>Description</th><th>Qty</th>
                </tr>
            </thead>
            <tbody xt-delegate="tr #click,rowClick" xt-autoupdate>
                <tr id="row{id}" class="click-cursor v:{id}">
                    <td>{sku}</td><td>{desc}</td><td>{qty}</td>
                </tr>
            </tbody>
        </table>
        <div id="info" class="column c13" xt-autoupdate></div>
    </div>
</body>

</html>

<?php

class NewPage extends RaxanWebPage {

    protected $db;
    protected $preserveFormContent = false;

    protected function _load() {

        if ($this->isPostBack) $this->db = $this->data('inventory');
        else {
            $db = Raxan::importCSV('inventory.csv');
            $this->db = $this->data('inventory',$db);
        }

        $this->inventory->find('tbody')->bind($this->db);
    }

    protected function rowClick($e) {
        $id = $e->intval();

        $this['#row'.$id]
            ->css('background','#ffcc00')
            ->siblings()->css('background','#fff');

        $row = $this->db[$id-1]; // get row data
        $img = '<img src="views/images/'.$row['photo'].'" align="left" class="pad" />';
        $details  = $row['details'];
        $this->info->html($img.$details);
    }
    
}
?>

Plugin Source:

HTML Source:

Data Source (inventory.csv):
id,sku,desc,qty,photo,details
1,IPH01,iPhone,200,iphone.jpg,The iPhone is a multimedia enabled smartphone designed and marketed by Apple Inc.  It's the first phone to feature multi-touch and a full html browser
2,IPH02,iPhone 3Gs,150,iphone3gs.jpg,"iPhone 3GS is a GSM cell phone that's also an iPod, a video camera, and a mobile Internet device with email and GPS maps. "
3,RIMB,BlackBerry Bold,160,blackberry.jpg,The Blackberry is a smartphone that's marketed by RIM. Blackberry provides the full smartphone experience with everything you need in a mobile phone.
4,DRO1,Motorola Driod,145,droid.jpg,The Motorola Droid is an Android-based smartphone by Motorola distributed by Verizon Wireless in the United States. 
5,HTC01,HTC Hero,260,htc.jpg,HTC Tattoo is the first phone that can be customized inside and out.  You cam personalise you phone with great apps from the Android Marketplace