Cjax Framework


UpdateX (Cjax 5.9+) is a simple but very powerful feature. Lets you easily change specific data.
With UpdateX you can update images, hidden elements values and more.

UpdateX consists of it being used with trigger events. It lets you update data and other elements based on the element you click on.
Let that sync for a bit, anything you click on you can store any type of information, then you can use that information to update other elements on the page.

Of course Cjax already lets you do all data, but this function would allow you to continue to update data on the page without making ajax requests. You could add extra attributes to elements, UpdateX lets you access these attributes and update other element, hidden value, or any object on that page with these attributes. This could save you requests to server to retrieve extra data!.

UpdateX works with wildcard selectors as well, you could be interacting with hundreds of elements with one line of code you could easily add sofisticated interactions, based on data attributes within these elements.
Say you made an ajax request that returned a many items, when one of the items is clicked you want it to do a few things but at the same time, you think that a request to server may not be necesary. Here UpdateX comes handy.
Within the elements attributes you sent the items already containing attributes with the information you want to be used. Use UpdateX, when the element is clicked on perform all the actions. You can combine this with other Cjax API's.
For example, display an OverlayContent() window and update its content with UpdateX().

Try the examples provided below, you will get the picture.

Example #1

Here are provided some example of usage, but keep in mind, there could be hundreds of different ways UpdateX could be used, for instance - 'innerHTML' is the property being used in some of the examples below. You can literally use any property existing to the element.
If you were to update other type of elements, such as a image, then you could update 'src' instead of the innerHTML. Note that the 'data-info' attribute you see in one of the examples below is completly made up, you can make up your own data-x attributes. You are just placing information so you can access it later.

PHP
<?php 

    
//updates #content1's html with the id of the element you clicked on
    
$ajax->click('#button1'$ajax->updateX('#content1','innerHTML','id'));

    
//updates #content1's html with the value of the button you clicked on
    
$ajax->click('#button2'$ajax->updateX('#content1','innerHTML','value'));

    
//updates #content1's html with the value of the button you clicked on
    
$ajax->click('#button3'$ajax->updateX('#content1','innerHTML','data-info'));

?>
HTML
    <input type='button' id='button1' value='Update box below with content'>
    <input type='button' id='button2' value='Update box below with content'>
    <input type='button' id='button3' value='Update box below with content' data-info='Extra attribute here!'>



Try it




Example #2


Code used:
PHP
<?php 

    
//updates #text's value
    // when you click the logo with id 'logo', text1 gets update, its value, for the images src.
    
$ajax->click('#logo'$ajax->updateX('#text1','value','src'));


?>
HTML
    <img id='logo' src='http://cjax.sourceforge.net/media/logo.png' border=0/>



Try it

Click the logo image below



Example #3

Code used:
PHP
<?php 

    
//updates #overlayContent's image
    // #some-image, is the placeholder we put in the overlay. first src - we are saying to update that property in the #some-image element.
    // the second src, is the property we pick from the element that is clicked, which has to be an image, because we binded the click to an image.
    
$ajax->click('#logo2', array(
        
$ajax->overlayContent("<img id='some-image' src=''>"),
        
$ajax->updateX('#some-image''src','src')
        )
    );

?>
HTML
       <img id='logo2' src='http://cjax.sourceforge.net/media/logo.png' border=0/>



Try it

Click the logo image below

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

CodeIgniter  ·  Copyright © 2006 - 2012  ·  Cjax