Cjax Framework


Project development is new to github. Give us a star.

Introduction

Built-in, Custom Callbacks, and Selectors

When you make an ajax request, some times you want do something extra with the response of your ajax call, here is where the callback system takes place. There are callbacks also available for other events. In addition, you can create custom callbacks, see some examples below.

You can also use on() method as a selector engine. When you would normally click() and other triggers You can now use on() method on elements selectors, this allows you to apply functions to custom selectors on the spot without having an actual trigger action. Unlike using click() and other events, the on() event basically triggers the functions/actions on the spot. This allows you to apply functions on elements with ease and without the need to trigger it.

Examples

Use On() as selector

You can now use on() method as a selector (Cjax 5.9 RC10 +) this would allow to select multiple elements on the page with wildcard selectos and apply a function to them all, without having a trigger such as a a click. Before, you would have to specify the elements on the functions themselves, now you can apply the functions to a wildcard selector.

PHP
<?php 

        $ajax
->on('.response'$ajax->prop(array('style' => array('backgroundColor' => 'Red'))));
        
        
$ajax->on('.response'$ajax->update('Some Text!'));
        
?>

Use On() as callback trigger

PHP
<?php 

     $ajax
->button1 $ajax->form(array('controller','method'));
     
$ajax->on('success'$ajax->alert('{response}'));
     
$ajax->on('error'$ajax->error('{response}'));
     
$ajax->on('complete'$ajax->overlayContent('{response}'));
     
$ajax->on('overlayPop'$ajax->success('An overlay has popped up!'));
    
?>

Consider the following - an ajax form assigned to a button, that has the id 'button1'.
You can wrap triggers inside the on() method, you can also assign further actions.
The following actions have no specific purpose, but it shows you an example how you may pass multiple actions, and trigger inside the on() callback method. You can also use the tag {response} to replace with the actual response of the ajax request. The success callback will only trigger after the ajax request is completed and the server response was not an error status code.

PHP
<?php 

     $ajax
->button1 $ajax->form(array('controller','method'));

    
$ajax->on('success',
        array(
            
$ajax->click('button3', array(
                    
$ajax->alert('{response}'),
                    
$ajax->prop(array('value' => '{response}'))
                )
            ),
            
$ajax->prop(array('value' => '{response}')),
            
$ajax->prop(array('value' => '{response}'),'button3'),
            
$ajax->flush('button1'),
            
$ajax->click('button1', array(
                
$ajax->success('{response}'),
            ))
        )
    );

    
//Add error callback to #button2
    
$ajax->click('button2'$ajax->call(array('controller','error')));
    
$ajax->on('error'$ajax->error('oh No! an error ocurred'));

     
//add overlayPop callback to #button4
    
$ajax->click('button4'$ajax->overlayContent('Testing on-overlayPop!'));
    
$ajax->on('overlayPop'$ajax->success('overlayPop callback here!'));
    
?>

Try it

On Error

You can catch all, error() responses through the error() callback. You can also catch individual errors responses depending on the error response status.

Error responses you can catch
PHP
<?php 

        $ajax
->on('error400'$ajax->[function]);
        
$ajax->on('error403'$ajax->[function]);
        
$ajax->on('error404'$ajax->[function]);
        
$ajax->on('error500'$ajax->[function]);
        
$ajax->on('error530'$ajax->[function]);
        
?>

You can catch any error status returned by the server. However, there is a contrast between server errors and php errors. Some times the server's response is a 200 (success) status even if there is a php error. In these cases, none of the errors callbacks would trigger. The response then would be considered success.

Built-in callbacks you can use

PHP
<?php 

        $ajax
->on('success'$ajax->[function]);
        
$ajax->on('error'$ajax->[function]);  //along with all the error statuses
        
$ajax->on('complete'$ajax->[function]);
        
$ajax->on('overlayPop'$ajax->[function]);
        
?>


Custom Callbacks

Important
In addition to the provided callbacks indentified on this page, you can also create custom callbacks. Which can be accessible through any plugin or through simply JavaScript everywhere on your site. You may name your custom callback, anything you like.

You may access this callback through a plugin or simply through JavaScript from anywhere: CJAX.callback.callbackName(); (just change 'callbackName' for the action name of the callback you invoked.


Examples of custom callbacks
PHP
<?php 

        $ajax
->on('bubbles'$ajax->info('Making Bubbles!'));
        
$ajax->on('dancing'$ajax->dance()); // triggers a fictional plugin or a existing function called dance!
        
$ajax->on('swimming'$ajax->swim())); //triggers a fictional plugin or a existing function called swim().
        
?>
JAVASCRIPT
          //would trigger, bubble callback, which would display an info message saying "Making Bubbles!"
          CJAX.callback.bubbles();
          //would trigger the dancing callback, this could be used anywhere on your site, or within a custom plugin.
          CJAX.callback.dancing();
          //Would trigger the swimming custom callback called swimming()
          CJAX.callback.swimming();

          //To be on the safe side, you may want to add a check to make sure the callback exists eg:
          if(CJAX.callback.bubbles) {
            CJAX.callback.bubbles();
          }
        

You may pass a parateter to your custom callbacks. It would be accessible retroactively to your callback declaration through the {response} tag.

PHP
<?php 

        $ajax
->on('bubbles'$ajax->info('{response}'));

        
?>
JAVASCRIPT
          //use the CJAX.ready() method if you call the function directly on page load.
          CJAX.ready(function() {
            if(CJAX.callback.bubble) {
                CJAX.callback.bubble('Making Bubble!');
            }
          });
        

You can also put your JS directly on the element, as shown below:

HTML
           <input type="button" id="custom_button1" value="Make Bubbles!" onclick="javascript:CJAX.callback.bubbles('Making Bubble!');"/>

        

Try it

 

Previous Topic:  Previous Class    ·   Top of Page   ·   Demos Home   ·  

CodeIgniter  ·  Copyright © 2006 - 2012  ·  Cjax