Ajax Contact List

Use the form below to add new contacts


PHP/HTML Source:
<?php
/**
 * Contact List Demo
 * A degradable Ajax Web form example
 */

require_once('raxan/pdi/autostart.php');

class ContactPage extends RaxanWebPage {

    protected $db;
    protected $updateList;
    
    protected function _config() {
        $this->degradable = true;
        $this->preserveFormContent = true;
        // enable or disable debugging
        $this->Raxan->config('debug', false);
        $this->icon = '<span title="Close" class="right close ui-icon ui-icon-close click-cursor"></span>';
    }

    protected function _init() {        
        $this->source('views/contactlist.html'); // load html source file
        $this->loadCSS('master');   // load css framework and default theme
        $this->loadTheme('default'); // load default/theme.css
        $this->connectToDB();   // connect to db
    }
    
    protected function _prerender() {
        // show contacts
        if (!$this->isCallback||$this->updateList) $this->showContacts(); 
    }

    // Events Handlers -------------------

    protected function cancelEdit($e) {
        $this->resetForm(true);
    }

    // add or update contact
    protected function saveContact($e) {
        // sanitize input
        $data = $this->post->filterValues('name,address,phone');

        // validate
        $msg = '';
        if ($data['name']=='') $msg = "* Missing Name<br />";
        if ($data['address']=='') $msg.= "* Missing Address<br />";        
        if ($msg) {
            // flash validation message to screen
            $this->flashmsg($this->icon.$msg,'fade','rax-box error');
        }
        else {
            try {
                // insert/update record
                $id = $this->rowid->intVal(); // get row id
                if ($id) $this->db->tableUpdate('contacts',$data,'id=?',$id);
                else $this->db->tableInsert('contacts',$data);
                $this->flashmsg($this->icon.'Record successfully '.($id ? 'modified':'created'),'fade','rax-box success');
            }
            catch(Exception $e) {
                $msg = 'Error while saving record';
                $this->flashmsg($this->icon.$msg,'fade','rax-box error');
                $this->Raxan->debug($msg.' '.$e);
                return;
            }
            $this->updateList = true;
            $this->resetForm($id ? true : false); // reset form fields
        }
    }

    protected function editContact($e) {
        try {
            $id = $e->intVal() | 0;
            $row = $this->db->table('contacts','id=?',$id);
            if (!$row) throw new Exception('Invalid redord');
            
            // populate form field
            $this->name->val($row[0]['name']);
            $this->address->val($row[0]['address']);
            $this->phone->val($row[0]['phone']);

            // set value to be returned by event when form is submitted
            $this->rowid->val($id); // set event value using form class

            // setup buttons
            $this->cmdcancel->show();
            $this->cmdsave->val('Save Contact')->addClass('process');

            // update web form
            $this->contact->updateClient();
        }
        catch(Exception $e) {
            $msg = 'Error while ediing record';
            $this->flashmsg($this->icon.$msg,'fade','rax-box error');
            $this->Raxan->debug($msg.' '.$e);
        }
    }

    protected function removeContact($e) {
        try {
            $id = $e->intval();
            $this->db->tableDelete('contacts','id=?',$id);
            $this->updateList = true;
            $this->flashmsg($this->icon.'Record successfully removed','fade','rax-box success');
        } catch(Exception $e) {
            $msg = 'Error while deleting records';
            $this->flashmsg($this->icon.$msg,'fade','rax-box error');
            $this->Raxan->debug($msg.' '.$e);
            return;
        }
    }

    protected function resetForm($isEdit) {
        $selector = '#contact input.textbox, #rowid';
        $this[$selector]->val(''); // clear form text fields
        if ($isEdit) {
            $this->cmdcancel->hide();
            $this->cmdsave->val('Add Contact')
                 ->removeClass('process');
        }
        $this->contact->updateClient(); // update web form
    }

    protected function showContacts() {        
        try {
            if (!$this->db) $this->list1->remove(); // remove list1
            else {
                $rs = $this->db->query('SELECT * FROM contacts ORDER BY id desc');
                $this->list1->bind($rs); // bind result to #list
                $this->list1->updateClient(); // manually update list on client
            }
        } catch(Exception $e) {
            $msg = 'Error while fetching records';
            $this->flashmsg($this->icon.$msg,'fade','rax-box error');
            $this->Raxan->debug($msg.' '.$e);
        }
    }

    protected function connectToDB() {
        try {
            // path to SQLite database - enable read/write permissions on file
            $dbFile = 'data/contacts.db';
            // connect to db - last param will enable exception error mode
            $this->db = $this->Raxan->connect('sqlite:'.$dbFile,null,null,true);
        } catch(Exception $e) {
            $msg ='Error while connecting to database '.$dbFile.'.';
            $this->Raxan->debug($msg.' '.$e);
            $this->flashmsg($this->icon.$msg,'fade','rax-box error');
        }
    }

}

?>

Plugin Source:

HTML/JavaScript Source (views/contactlist.html):
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Contact List</title>
</head>

<body>
    <div class="container c25">
        <h2 class="rax-header-pal rax-glass round-top pad bottom border2"><img src="views/images/users.png" width="24" height="24" />&nbsp;Contact Form</h2>
        <div class="rax-box prepend1 pad" >
            <form id="contact" method="post">
                <input type="hidden" name="rowid" id="rowid" value="" />
                <div class="ctrl-group">
                    <label class="column c4">Name:</label><input class="textbox" id="name" name="name" size="65" />
                </div>
                <div class="ctrl-group">
                    <label class="column c4">Address:</label><input class="textbox" id="address" name="address" size="65" /><br />
                </div>
                <div class="ctrl-group">
                    <label class="column c4">Phone:</label><input class="textbox" id="phone" name="phone" size="65" /><br />
                </div>
                <hr />
                <div id="btnbar" class="container" xt-preservestate>
                    <input id="cmdsave" type="submit" class="left button rtm " value="Add Contact" xt-bind="#click,saveContact,,true" />
                    <input id="cmdcancel" type="submit" class="left button cancel hide" value="Cancel" xt-bind="#click,cancelEdit" /><br />
                </div>
            </form>
        </div>
        <div class="flashmsg tpm" xt-autoupdate></div>
        <div id="list1" xt-delegate="a.edit #click,editContact; a.remove #click,removeContact">
            <div class="pad bmb">
                <span class="right">
                    <a class="edit" href="#{id}" rel="nofollow">Edit</a>&nbsp;/&nbsp;
                    <a class="remove" href="#{id}" data-event-confirm="Are you sure you want to remove this record?" rel="nofollow">Remove</a>
                </span>
                <h3 class="bottom"><img src="views/images/user.png" width="16" height="16" /> {name}</h3>
                Address:{address} / Phone: {phone}
            </div>
        </div>
        <p>&nbsp;</p>
    </div>
</body>

</html>

Data Source: