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;">';
$dropDown=array('0'=>'N/A');
//$this->CI->printReadable('in item_edit, vars["editMe"]',$vars['editMe']);
foreach($vars['editMe'] as $hostArray=>$hostToEdit) {
strlen($hostToEdit['site_id'])?$default=$hostToEdit['site_id']:$default='0';
foreach($hostToEdit as $hostItem=>$hostValue) {
!@strlen($hostValue)?$hostValue='Not set':NULL;
switch($hostItem) {
case 'site_name':
foreach($vars['sites'] as $siteArray=>$siteToShow) {
$dropDown[$siteToShow['site_id']]=$siteToShow['site_name'];
}
$echoMe="< tr>< td class='edit_host' id='$hostItem'>$hostItem< /td>< td>".form_dropdown('site_name',$dropDown,$default,'class="edit_host"').'< /td>< /tr>';
echo $echoMe;
break;
case 'host_id': case 'net_id': case 'spec_id': case 'brand_id':
echo "< input type='hidden' value='$hostValue' name='$hostItem'>";
break;
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>
$echoMe="< td>< input type='text' value='$hostValue' name='$hostItem' class='edit_host'>< /td>< /tr>";
echo $echoMe;
break;
default:
// these are extra bits of info we're not using yet
break;
}
}
}
echo '< a href="#" onClick="doJSON(this.id,'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='http://136.180.24.150/uams/index.php/uams/test/';
this.test={};
var i=0;
// mootools selectors
$$('.'+target).each(function(el) {
var tagType=el.getTag();
var param=el.getAttribute('name');
if(tagType==='input'){
this.test[el.getAttribute('name').toString()]=el.value.toString();
} /*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(response.search(/^.*deleted!$/));
//if(response.search(/^.*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;
closeMOOdalBox('750',hide);
}
}).request();
}
One last bit of code in the CI controller, called test (which we called above via AJAX):
public function test() {
//$newObject=;
$input=file_get_contents('php://input');
$newObject=json_decode($input);
if(is_object($newObject)) {
echo "it's an object!n";
print_r($newObject);
} else {
echo 'fecal!';
print_r($input);
}
}
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] => 136.180.69.101
[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! 
