Choose your database:
MS SQL Server
SQL Anywhere

Subscribe to our news:

How to add inline buttons to a webpage created with PHP Generator?

Last modified: May 24, 2011

Prev Next


The article shows how to implement an AJAX-based one-click editor for a logical column with the help of the JQuery framework.


PHP Generator creates applications that allow to edit data in a separate page, in a modal dialog, and in inline mode. To edit a record in any of these ways, you need to make at least three operations: click the 'Edit' icon, change data, and push 'Save'.

Edit data in a separate formPicture 1. Editing data in a form

However, if the most usual action on working with a webpage is editing of a single column that stored logical values, such manipulations do not seem to be efficient. Our goal is to reduce the number of operations with the help of inline buttons embedded into this column. Such solution allows you to easily switch a column value with a single mouse click as displayed below.

Editing data with inline buttonsPicture 2. Editing data with inline buttons


Of course we would like to update the value without reloading the whole page, so we need to use the AJAX technology. To add the AJAX inline button, process as follows:

  • Create a php file to be used for changing of column data.
  • Enable the OnCustomRenderColumn event handler to append a button to the column. On clicking the button the prepared php file is invoked and the corresponding value is changed.

To show the implementation of the AJAX button on a webpage created with PHP Generator, we use a sample table containing a list of products with a True/False column storing the product activity. The button is added to this column and used to change the activity.

Listing 1. SQL definition of the table
CREATE TABLE product (
  name    varchar(100),
  active  tinyint(1) NOT NULL,

Step 1

First of all, we need to create a php file to be used for working with table data. It accepts the product id and activity values through $_GET parameters to replace them by the given one.

Listing 2. change_product_activity.php
require_once 'phpgen_settings.php';
require_once 'database_engine/mysql_engine.php';
if (isset($_GET['id']) && isset($_GET['active']))
    $connection = new MyConnection(GetGlobalConnectionOptions());
    $id = $_GET['id'];
    $active = $_GET['active'];
    $sql = "UPDATE product SET active=$active WHERE id=$id";
    echo json_encode(array("id" => $id, "active" => $active));

In this example we use an instance of the MyConnection class to connect to MySQL. Code generated by PHP Generators for other DBMS provides similar classes (PgConnection, MsConnection, etc). The result is sent to the output with the help of the json_encode function.

To simplify the example code, we omitted the problem of SQL injections. The issue is covered in details, for example, in the corresponding article on

Step 2

To append a button to the column, enable the OnCustomRenderColumn event handler. This event allows you to customize the cell content according to your needs (see the documentation to find out the complete description of the event parameters). As the event body we enter the following PHP code.

Listing 3. OnCustomRenderColumn event handler
if ($fieldName == 'active')
    $customText = '<div class="product_active_value" style="display: none;">'.$fieldData.'</div>';
    $customText .= 
    '<span class="product_active_caption" style="margin-right: 20px;">' . 
        ($fieldData == 1 ? 'Active' : 'Inactive') . 
    $customText .= 
    '<button onclick="' . 
        "var activeValue = $(this).siblings('.product_active_value');" . 
        "var activeCaption = $(this).siblings('.product_active_caption');"  .
        'change_product_activity.php?id=" . $rowData['id'] . 
            "&active=' + (activeValue.html() == '1' ? '0' : '1'), " . 
        "function(data) { " . 
            "activeValue.html(;" . 
            "activeCaption.html( == 1 ? 'Active' : 'Inactive')" . 
        "});" . 
        "return false;". 
    $handled = true;

The screenshot below displays how the event handler looks in PHP Generator.

The Events tab of the 'Product' Page Editor and the OnCustomRenderColumn Event EditorPicture 3. The Events tab of the 'Product' Page Editor and the OnCustomRenderColumn Event Editor

Then generate and upload the web application as usual. Don't forget to copy the php file prepared at the first step (see above) to the directory with the generated files.


The solution above allows you to optimize the editing of logical columns. You might also want to protect your data from accidental changes with the standard Javascript confirm function.

Related links

Prev Next