PHP + JAVASCRIPT SAVE DATA - php

Question

This is the controller:
public function routeupdateAction() {
$iRoute = IV_Http_Base::getParameter( 'id', IV_Http_Base::HTTP_POST );
$sPath = IV_Http_Base::getParameter( 'path', IV_Http_Base::HTTP_POST );
$sModule = IV_Http_Base::getParameter( 'module', IV_Http_Base::HTTP_POST );
$sController = IV_Http_Base::getParameter( 'controller', IV_Http_Base::HTTP_POST );
$sAction = IV_Http_Base::getParameter( 'action', IV_Http_Base::HTTP_POST );
$iAccessRole = IV_Http_Base::getParameter( 'accessRole', IV_Http_Base::HTTP_POST );
$iRoleCompareOperator = IV_Http_Base::getParameter( 'roleCompareOperator', IV_Http_Base::HTTP_POST );
$oRoute = Default_Model_RouteEntity::getInstanceById( $iRoute );
if( is_object( $oRoute ) && $oRoute instanceof Default_Model_RouteEntity ) {
$oRoute->setPath( $sPath );
$oRoute->setModule( $sModule );
$oRoute->setController( $sController );
$oRoute->setAction( $sAction );
$oRoute->setAccessRole($iAccessRole);
$oRoute->setRoleCompareOperator($iRoleCompareOperator);
$oRoute->save();
$aReturn = array( 'valid' => 'true' );
} else {
$aReturn = array( 'valid' => 'false' );
}
echo json_encode( $aReturn );
}
}
The route.js file
var ROUTE = new function () {
var oGlobal = this;
this.sSaveUrl = '';
this.setSaveUrl = function (_sUrl) {
this.sSaveUrl = _sUrl;
}
this.setEventSubmit = function () {
$('[id^="route_update"]').each(function () {
$(this).click(function () {
var oData = $(this).closest('tr').find('input').serializeArray();
console.log(oData);
oReq = $.post(oGlobal.sSaveUrl, oData, function (data) {
if (data['valid'] != "true") {
//console.log('error');
//Fade in
$('#comment').html('Insert Success').fadeIn(1000);
//Fade out
setTimeout(function () {
$('#comment').html('').fadeOut(1000);
}, 1500);
//fade in
$('#comment')
} else {
// console.log('success');
//Fade in
$('#comment').html('Insert Success').fadeIn(1000);
//Fade out
setTimeout(function () {
$('#comment').html('').fadeOut(1000);
}, 1500);
//fade in
$('#comment')
}
return false;
}, 'json');
return false;
});
});
}
this.init = function () {
this.setEventSubmit();
}
}
and the html markup
<form class="form-inline" role="form">
<form class="well form-inline">
<table class="table table-bordered" width="100%">
<tr>
<th width="13%">Path</th>
<th width="13%">Module</th>
<th width="13%">Controller</th>
<th width="13%">Action</th>
<th width="13%">Access Role</th>
<th width="13%">Compare Operator</th>
<th width="9%">Submit</th>
</tr>
<?
$aRoutes = $this->getValue('aRoutes');
if( count($aRoutes) == 0 ) {
?>
<tr>
<td colspan="7">No routes found!</td>
</tr>
<?
} else {
/**
* #var Default_Model_RouteEntity $oRoute
*/
foreach ( $aRoutes as $oRoute) {
?>
<tr>
<td width="13%">
<input type="text" name="path" value="<?= $oRoute->getPath(); ?>"/>
</td>
<td width="13%">
<input type="text" value="<?= $oRoute->getModule(); ?>"/>
</td>
<td width="13%">
<input type="text" value="<?= $oRoute->getController(); ?>"/>
</td>
<td width="13%">
<input type="text" value="<?= $oRoute->getAction(); ?>"/>
</td>
<td width="13%">
<input type="text" class="form-actions" value="<?= $oRoute->getAccessRole(); ?>"/>
</td>
<td width="13%">
<input type="text" value="<?= $oRoute->getRoleCompareOperator(); ?>"/>
</td>
<td width="9%">
<input type="hidden" name="id" value="<?= $oRoute->getId(); ?>" />
<button type="button" class="btn btn-default btn-sm" id="route_update">Edit</button>
<div id="comment"></div>
</td>
</tr>
<?
}
} ?>
</table>
</form>
</form>
<? $this->addJs('admin/cms/route'); ?>
<script type="text/javascript">
$(document).ready(function () {
ROUTE.setSaveUrl('<?=IV_Url_Base::url( 'admin_cms_routeupdate' ); ?>');
ROUTE.init();
});
</script>
My request is, as you can see the basic features are ready...Now what I need to implement is to save the data when i change a row.
This should be needed in js without refreshing the page lots of times and if the data are saved correctly you have a fade displaying the right saving..
How do I save the data when a row is changed?

Answer 1

Delete the "form" tags.
Use jQuery to set onclick events on the buttons.
Use parent('tr') (parent) to retrieve row element.
Using the row element use each to iterate through td tags and save the data to some array: $('td', $row).each(function () { /* parse td element */ });
Send array to PHP script using AJAX.
Save the data in PHP script and display result to AJAX using status codes (200 - OK, 4** - ERROR)
If everything is working, use jQuery to do the animations you want.