My new best friend JSON, using with Code Igniter and Mootools

Posted on Posted in web development

So for the project I’m currently working on at work, I decided to use JavaScript Object Notation (JSON) to pass some of the changes made via AJAX to avoid page refreshes. Sounds complicated, huh? Well, it took me about 6 hours to figure it out, but JSON is pretty powerful.

Here’s some code, for those of you that like code (like me).

First I generate the current values, as pulled from the database through AJAX into a MOOdalBox that overlays the page (notice the class names of edit_host, which we’ll select later with the Mootools Selectors):

echo form_open('contoller_name/setAction/confirm_host/'.$vars['host_id']);
echo '< table style="color: #111;">';
//$this->CI->printReadable('in item_edit, vars["editMe"]',$vars['editMe']);
foreach($vars['editMe'] as $hostArray=>$hostToEdit) {
foreach($hostToEdit as $hostItem=>$hostValue) {
!@strlen($hostValue)?$hostValue='Not set':NULL;
switch($hostItem) {
case 'site_name':
foreach($vars['sites'] as $siteArray=>$siteToShow) {
$echoMe="< tr>< td class='edit_host' id='$hostItem'>$hostItem< /td>< td>".form_dropdown('site_name',$dropDown,$default,'class="edit_host"').'< /td>< /tr>';
echo $echoMe;
case 'host_id': case 'net_id': case 'spec_id': case 'brand_id':
echo "< input type='hidden' value='$hostValue' name='$hostItem'>";
case 'host_name': case 'net_ip': case 'host_assetnum': case 'host_hostid': case 'host_serial': case 'host_domain': case 'net_mac': case 'spec_cpunum': case 'spec_memtototal':
?>< tr>< td>< input type='text' value='$hostValue' name='$hostItem' class='edit_host'>< /td>< /tr>";
echo $echoMe;
// these are extra bits of info we're not using yet
echo '< a href="#" onClick="doJSON(,'edit_host'); return true;")>Feces!';
echo '< /table>';
echo form_close();

Next, here is the JavaScript code that does the JSON encoding and AJAX calls:
function doJSON(caller,target) {
var url='';
var i=0;
// mootools selectors
$$('.'+target).each(function(el) {
var tagType=el.getTag();
var param=el.getAttribute('name');
} /*else if(tagType==='whatever'){ //test other tag types here }
var JSONString=Json.toString(this.test);
var doesntmatter = new Ajax(url, {
method: 'post',
postBody: JSONString,
update: $(target),
onComplete: function(response) {
// console.log(^.*deleted!$/));
//if(^.*deleted!$/)>0) {var hide=1;}
//else {var hide=0;}
// the hide variable hides the row being worked on ... not used in this view, but looks good for the delete function
var hide=0;

One last bit of code in the CI controller, called test (which we called above via AJAX):

public function test() {
if(is_object($newObject)) {
echo "it's an object!n";
} else {
echo 'fecal!';

And…………..drum roll please………….the result is:

it's an object!
stdClass Object
[host_name] => asdss06h
[host_domain] => Not set
[host_serial] => Not set
[host_assetnum] => Not set
[host_hostid] => Not set
[net_mac] => Not set
[net_ip] =>
[spec_cpunum] => Not set

Sweet! Now on to the next step … actually doing something with the data I passed to the back-end PHP code. Fun!

Leave a Reply

Your email address will not be published. Required fields are marked *