Calculator

This calculator demonstrates the basic integration of xajax and Code Igniter. For the details of setting up the Code Igniter and xajax, please see the HOWTO. I also made the registered server-side function to sleep for 0.2 second in order to display the loading message.

NOTE: I added the error checking on whether the denominator is numeric or equal to 0 to avoid the issue of "devide by zero".

Number 1:

Number 2:



Result:

Controller: 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':
                if (is_numeric($number_2) && $number_2 != 0) {
                    $result = $number_1 / $number_2;
                }
                else { 
                    $result = "NaN";
                }
                break;
        }

        $objResponse = new xajaxResponse();
        usleep(200000);
        $objResponse->addAssign("txt_result", "value", "". $result);
        return $objResponse;
    }
}
?>

View: 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 0.2 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 added the error checking on whether the denominator is numeric or equal to 0 to avoid the issue of "devide by zero".
</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>