Dengan PHPRunner, bisa langsung EDIT di aplikasi

fankychristian - November 13, 2015

Similar to Excel-like grid discussed in previous article this technique helps you to achieve similar goals. Instead of bringing up the whole edit page you can click that single field you need to edit, change its value and see your changes posted to the database automatically.
Click any of fields that are enabled for inline editing. Text will turn into edit control, the way it were setup in PHPRunner, ASPRunnerPro or ASPRunner.NET. To exit editing hit Esc button on your keyboard or click anywhere outside of edit control. Changes will be saved automatically.
To make this happen select one or more fields to be editable inline and add the following code to List page: Javascript OnLoad event.

Code

PHPRunner

  1. $(document).ready(function() {  
  2.   
  3.     var $elem;  
  4.     var key;  
  5.     var field;  
  6.     var val;  
  7.   
  8.     function cancelEditing() {  
  9.         if ($grid.data("editing")) {  
  10.             $elem.html(val);  
  11.             $grid.data("editing", false);  
  12.             $elem.closest("td").css("padding","5px 8px");  
  13.         }  
  14.     };  
  15.   
  16.     $(document).keyup(function(e) {  
  17.         if (e.keyCode == 27) {  
  18.             cancelEditing();  
  19.         }  
  20.     });  
  21.   
  22.     $("span[id^=edit]").attr('title', 'Click to edit');  
  23.   
  24.         $grid=$(document.body);  
  25.         $grid.on("click", function(e) {  
  26.   
  27.         // click during editing outside of edited element  
  28.         if ($grid.data("editing") &&  
  29.                 !$(e.target).is(":focus")   ) {  
  30.             cancelEditing();  
  31.             return;  
  32.         }  
  33.   
  34.         // click  on one of editable elements?  
  35.         if( $grid.data("editing") ||  
  36.                 !$(e.target).attr("id") ||  
  37.                 !$grid.data("editing") && $(e.target).attr("id").substring(0, 4) != "edit"  
  38.             ) {  
  39.             return;  
  40.         }  
  41.   
  42.         $elem = $(e.target);  
  43.         // enter editing mode  
  44.         val = $elem.html();  
  45.   
  46.         $grid.data("editing", true);  
  47.   
  48.         var id = $elem.parent().attr("data-record-id");  
  49.         var res=$elem.attr("id").match(/[^_]+$/);  
  50.         field = res[0];  
  51.   
  52.         var gridrows = JSON.parse(JSON.stringify(pageObj.controlsMap.gridRows));  
  53.         for (var i = 0; i < gridrows.length; i++) {  
  54.             if (gridrows[i].id==id) {  
  55.                 key=gridrows[i].keys[0];  
  56.                 break;  
  57.             }  
  58.         }  
  59.   
  60.         // prepare request  
  61.         var data = {  
  62.             id: id,  
  63.             editType: "inline",  
  64.             editid1: key,  
  65.             isNeedSettings: true  
  66.         };  
  67.   
  68.         // get edit controls from the server  
  69.         $.ajax({  
  70.         type: "POST",  
  71.         url: "products_edit.php",  
  72.         data: data  
  73.         }).done(    function(jsondata) {  
  74.             var decoded = $(' 
  75. <div>').html(jsondata).text();  
  76.             response = jQuery.parseJSON( decoded );  
  77.   
  78.             // clear error message if any  
  79.             if ($elem.next().attr('class')=="rnr-error")  
  80.                 $elem.next().remove();  
  81.   
  82.             // cmake control as wide as enclosing table cell  
  83.             width = $elem.closest("td").width();  
  84.   
  85.             $elem.html(response.html[field]);  
  86.             if (response.html[field].indexOf("checkbox")<0) {  
  87.                 $elem.find("input,select").width(width-5).focus();  
  88.                 $elem.closest("td").css("padding","1px 1px");  
  89.             }  
  90.   
  91.         });  
  92.   
  93.         });  
  94.   
  95. $grid.data("editing", false);  
  96.   
  97.  // save function  
  98.  $(document.body).on('change','input[id^=value],select[id^=value]',function() {  
  99.   
  100.     var data = {  
  101.         id: 1,  
  102.         editType: "inline",  
  103.         a: "edited",  
  104.         editid1: key  
  105.     };  
  106.   
  107.     var type = $(this).attr('type');  
  108.     if (type)  
  109.         type=type.toLowerCase();  
  110.     else  
  111.         type="text";  
  112.   
  113.     // regular field or check box  
  114.     if (type!="checkbox") {  
  115.         data["value_"+field+"_1"]=$(this).val();  
  116.     } else {  
  117.         if($(this).is(":checked")) {  
  118.             val="on";  
  119.         }  
  120.         data["value_"+field+"_1"]=val;  
  121.         data["type_"+field+"_1"]="checkbox";  
  122.     }  
  123.   
  124.     // clear error message if any  
  125.     if ($(this).next().attr('class')=="rnr-error")  
  126.             $(this).next().remove();  
  127.   
  128.     // save data  
  129.     $.ajax({  
  130.       type: "POST",  
  131.       url: "products_edit.php?submit=1",  
  132.       data: data  
  133.         }).done(    function(jsondata) {  
  134.             var decoded = $(' 
  135. <div>').html(jsondata).text();  
  136.             response = jQuery.parseJSON( decoded );  
  137.             if (response["success"]==false) {  
  138.                 $(" 
  139. <div class="rnr-error/">").insertAfter($elem).html(response["message"]);  
  140.             }  
  141.             else {  
  142.                 $elem.html(response["vals"][field]);  
  143.                 $grid.data("editing", false);  
  144.                 $elem.closest("td").css("padding","5px 8px");  
  145.             }  
  146.         });  
  147.     });  
  148. });  
  149. </div></div></div>  
You will have to modify the Edit page URL accordingly to your project settings. Replace products_edit.phpwith corresponding name of your table i.e. tablename_edit.php.

ASPRunnerPro

Replace products_edit.php with corresponding name of your table i.e. tablename_edit.asp.

ASPRunner.NET

No changes are required. Code goes to List page: Javascript OnLoad event.
  1. $(document).ready(function() {  
  2.   
  3.     var $elem;  
  4.     var key;  
  5.     var field;  
  6.     var val;  
  7.   
  8.     function cancelEditing() {  
  9.         if ($grid.data("editing")) {  
  10.             $elem.html(val);  
  11.             $grid.data("editing", false);  
  12.             $elem.closest("td").css("padding","5px 8px");  
  13.         }  
  14.     };  
  15.   
  16.     $(document).keyup(function(e) {  
  17.         if (e.keyCode == 27) {  
  18.             cancelEditing();  
  19.         }  
  20.     });  
  21.   
  22.     $("span[id^=edit]").attr('title', 'Click to edit');  
  23.   
  24.         $grid=$(document.body);  
  25.         $grid.on("click", function(e) {  
  26.   
  27.         // click during editing outside of edited element  
  28.         if ($grid.data("editing") &&  
  29.                 !$(e.target).is(":focus")   ) {  
  30.             cancelEditing();  
  31.             return;  
  32.         }  
  33.   
  34.         // click  on one of editable elements?  
  35.         if( $grid.data("editing") ||  
  36.                 !$(e.target).attr("id") ||  
  37.                 !$grid.data("editing") && $(e.target).attr("id").substring(0, 4) != "edit"  
  38.             ) {  
  39.             return;  
  40.         }  
  41.   
  42.         $elem = $(e.target);  
  43.         // enter editing mode  
  44.         val = $elem.html();  
  45.   
  46.         $grid.data("editing", true);  
  47.   
  48.         var id = $elem.parent().attr("data-record-id");  
  49.         var res=$elem.attr("id").match(/[^_]+$/);  
  50.         field = res[0];  
  51.   
  52.         var gridrows = JSON.parse(JSON.stringify(pageObj.controlsMap.gridRows));  
  53.         for (var i = 0; i < gridrows.length; i++) {  
  54.             if (gridrows[i].id==id) {  
  55.                 key=gridrows[i].keys[0];  
  56.                 break;  
  57.             }  
  58.         }  
  59.   
  60.         // prepare request  
  61.         var data = {  
  62.             id: id,  
  63.             editType: "inline",  
  64.             editid1: key,  
  65.             isNeedSettings: true  
  66.         };  
  67.   
  68.         // get edit controls from the server  
  69.         $.ajax({  
  70.         type: "POST",  
  71.         url: "edit",  
  72.         data: data  
  73.         }).done(    function(jsondata) {  
  74.             var decoded = $(' 
  75. <div>').html(jsondata).text();  
  76.             response = jQuery.parseJSON( decoded );  
  77.   
  78.             // clear error message if any  
  79.             if ($elem.next().attr('class')=="rnr-error")  
  80.                 $elem.next().remove();  
  81.   
  82.             // cmake control as wide as enclosing table cell  
  83.             width = $elem.closest("td").width();  
  84.   
  85.             $elem.html(response.html[field]);  
  86.             if (response.html[field].indexOf("checkbox")<0) {  
  87.                 $elem.find("input,select").width(width-5).focus();  
  88.                 $elem.closest("td").css("padding","1px 1px");  
  89.             }  
  90.   
  91.         });  
  92.   
  93.         });  
  94.   
  95. $grid.data("editing", false);  
  96.   
  97.  // save function  
  98.  $(document.body).on('change','input[id^=value],select[id^=value]',function() {  
  99.   
  100.     var data = {  
  101.         id: 1,  
  102.         editType: "inline",  
  103.         a: "edited",  
  104.         editid1: key  
  105.     };  
  106.   
  107.     var type = $(this).attr('type');  
  108.     if (type)  
  109.         type=type.toLowerCase();  
  110.     else  
  111.         type="text";  
  112.   
  113.     // regular field or check box  
  114.     if (type!="checkbox") {  
  115.         data["value_"+field+"_1"]=$(this).val();  
  116.     } else {  
  117.         if($(this).is(":checked")) {  
  118.             val="on";  
  119.         }  
  120.         data["value_"+field+"_1"]=val;  
  121.         data["type_"+field+"_1"]="checkbox";  
  122.     }  
  123.   
  124.     // clear error message if any  
  125.     if ($(this).next().attr('class')=="rnr-error")  
  126.             $(this).next().remove();  
  127.   
  128.     // save data  
  129.     $.ajax({  
  130.       type: "POST",  
  131.       url: "edit?submit=1",  
  132.       data: data  
  133.         }).done(    function(jsondata) {  
  134.             var decoded = $(' 
  135. <div>').html(jsondata).text();  
  136.             response = jQuery.parseJSON( decoded );  
  137.             if (response["success"]==false) {  
  138.                 $(" 
  139. <div class="rnr-error/">").insertAfter($elem).html(response["message"]);  
  140.             }  
  141.             else {  
  142.                 $elem.html(response["vals"][field]);  
  143.                 $grid.data("editing", false);  
  144.                 $elem.closest("td").css("padding","5px 8px");  
  145.             }  
  146.         });  
  147.     });  
  148. });</div></div></div>  
 ASP.NET, PHP, PHP CODE GENERATOR, PHP FORM GENERATOR, TUTORIALS
Tags: