jquery - PHP + JAVASCRIPT SAVE DATA -
this 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') } homecoming false; }, 'json'); homecoming false; }); }); } this.init = function () { this.seteventsubmit(); } }
and 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 $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, can see basic features ready...now need implement save info when alter row.
this should needed in js without refreshing page lots of times , if info saved correctly have fade displaying right saving..
how save info when row changed?
delete "form" tags. use jquery set onclick events on buttons. use parent('tr')
(parent) retrieve row element. using row element utilize each iterate through td
tags , save info array: $('td', $row).each(function () { /* parse td element */ });
send array php script using ajax. save info in php script , display result ajax using status codes (200 - ok, 4** - error) if working, utilize jquery animations want.
php jquery json
No comments:
Post a Comment