Xajax and CodeIgniter Tutorial: Calculator

Credits: Alex

CodeIgniter tutorial for making simple ajax based application using Xajax

Introduction

This calculator demonstrates the basic integration of xajax and Code Igniter. For this tutorial example demo, please follow the Reference Link above.

Source Code

calculator.php

<?php
class calculator extends Controller
{
    function calculator()
    {
        parent::Controller();
    }
    function index()
    {
        // XAJAX
        $this->load->library('xajax');
        $this->xajax->registerFunction(array(
            "calculate_numbers", &$this,
            "calculate_numbers"
        ));
        $this->xajax->processRequests();
        $data['xajax_js']         = $this->xajax->getJavascript(null, '/js/xajax.js');
        // load views
        $data['head_title']         = WEBSITE_NAME . " - Examples: Calculator";
        $data['highlighted_controller']         = highlight_file("calculator.php", TRUE);
        /// load example MVC
        $example = new example('calculator', true);
        $data['highlighted_view']         = $example->view;
        $data['subheader']         = $this->load->view('examples_subheader', $data, true);
        $data['sidebar']         = $this->load->view('examples_sidebar', $data, true);
        $data['body_content']         = $this->load->view('calculator_tpl', $data, true);
        $this->load->view('site_layout', $data);
    }
    function calculate_numbers($command, $number_1, $number_2)
    {
        switch ($command) {
        case 'add':
            $result = $number_1 + $number_2;
            break;

        case 'subtract':
            $result = $number_1 - $number_2;
            break;

        case 'multiply':
            $result = $number_1 * $number_2;
            break;

        case 'divide':
            $result = $number_1 / $number_2;
            break;
        }
        $objResponse = new xajaxResponse();
        sleep(1);
        $objResponse->addAssign("txt_result", "value", "" . $result);
        return $objResponse;
    }
}
?>

calculator_tpl.php

<script type="text/javascript">

<!-- 
xajax.loadingFunction = function(){xajax.$('loading_message').style.display='block';}; 
xajax.doneLoadingFunction = function(){xajax.$('loading_message').style.display='none';}; 
// --> 
</script>

<div id="loading_message" class="loadingMessage">
    Calculating ...
</div>

<h1 id="introduction">Calculator</h1>

<p>This calculator demonstrates the basic integration of <?=XAJAX_LINK_POPUP?>
 and <?=CODE_IGNITER_LINK_POPUP?>
. For the details of setting up the <?=CODE_IGNITER_LINK_POPUP?>
 and <?=XAJAX_LINK_POPUP?>
, please see the <a href="http://www.codeigniter.com/wiki/XAJAX">HOWTO</a>. I also made the registered server-side function to sleep for one second in order to <a href="http://wiki.xajaxproject.org/Tutorials:Creating_a_Loading_Message" target="_new">display the loading message</a>.</p>

<p><b>NOTE</b>: I didn't do the error checking for the division by zero, but the <?=XAJAX_LINK_POPUP?>
 handled it gracefully by popping up an alert. Try it!</p>

<p>Number 1: <input type="text" id="txt_num_1" size="10" maxlength="10"><br>
<br>
Number 2: <input type="text" id="txt_num_2" size="10" maxlength="10"><br>
<br>
<input type="button" id="btn_add" value="Add" onclick="xajax_calculate_numbers('add', document.getElementById('txt_num_1').value, document.getElementById('txt_num_2').value);"> <input type="button" id="btn_subtract" value="Subtract" onclick="xajax_calculate_numbers('subtract', document.getElementById('txt_num_1').value, document.getElementById('txt_num_2').value);"> <input type="button" id="btn_multiply" value="Multiply" onclick="xajax_calculate_numbers('multiply', document.getElementById('txt_num_1').value, document.getElementById('txt_num_2').value);"> <input type="button" id="btn_divide" value="Divide" onclick="xajax_calculate_numbers('divide', document.getElementById('txt_num_1').value, document.getElementById('txt_num_2').value);"><br>
<br>
Result: <input type="text" id="txt_result" size="20"></p>

<h1 id="introduction">Controller: calculator.php</h1>

<p>
  <?=$highlighted_controller?>
</p>

<h1 id="introduction">View: calculator_tpl.php</h1>

<p>
  <?=$highlighted_view?>
</p>

Love this source code? Please help us to spread it ^_^