How To Include Mate In Existing Web Page

A collection of tutorials and posts that show additional functionality of MATE

Moderator: KarelB

How To Include Mate In Existing Web Page

Postby admin » Wed Mar 30, 2011 3:19 pm

HTML Page Code (read html comments):

Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Untitled Document</title>

        <!-- Link to editor files -->
        <link href="css/table_styles.css" rel="stylesheet" type="text/css" />
        <link href="css/icon_styles.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/prototype.js"></script>            
        <script type="text/javascript" src="js/ajax_table_editor.js"></script>
       
        <!-- Link to calendar files if needed -->
        <!--<link rel="stylesheet" type="text/css" media="all" href="js/jscalendar/skins/aqua/theme.css" title="win2k-cold-1" />
        <script type="text/javascript" src="js/jscalendar/calendar.js"></script>
        <script type="text/javascript" src="js/jscalendar/lang/calendar-en.js"></script>
        <script type="text/javascript" src="js/jscalendar/calendar-setup.js"></script>-->
       
        <!-- Set ajax url -->
        <script type="text/javascript">
            trackHistory = false;
            var ajaxUrl = 'TableEditorConfig.php';
        </script>
       
    </head>
   
    <!-- Call js function on load -->
    <body onload="toAjaxTableEditor('update_html','');">
       
        <!-- Original html content -->
        <p>This is the original web page html</p>
        <!-- End original html content -->
       
        <!-- Editor HTML -->
        <div id="historyContainer">
            <div id="information">
            </div>
       
            <div id="titleLayer" style="padding: 2px; font-weight: bold; font-size: 18px; text-align: center;">
            </div>
       
            <div id="tableLayer" align="center">
            </div>
           
            <div id="recordLayer" align="center">
            </div>      
           
            <div id="searchButtonsLayer" align="center">
            </div>
        </div>
        <!--  End editor HTML -->
       
        <!-- Original html content -->
        <p>This is the original web page html</p>
        <!-- End original html content -->
       
    </body>
</html>


PHP Page Code (filename must match the ajax url set in the html page):
Code: Select all
<?php
require_once('Common.php');
class Example1 extends Common
{
   function initiateEditor()
   {
      $tableColumns['id'] = array('display_text' => 'ID', 'perms' => 'TVQSX');
      $tableColumns['first_name'] = array('display_text' => 'First Name', 'perms' => 'EVCTAXQS');
      $tableColumns['last_name'] = array('display_text' => 'Last Name', 'perms' => 'EVCTAXQS');
      $tableColumns['email'] = array('display_text' => 'Email', 'perms' => 'EVCTAXQS');
      $tableColumns['department'] = array('display_text' => 'Department', 'perms' => 'EVCTAXQS', 'select_array' => array('Accounting' => 'Accounting', 'Marketing' => 'Marketing', 'Sales' => 'Sales', 'Production' => 'Production'));
      $tableColumns['hire_date'] = array('display_text' => 'Hire Date', 'perms' => 'EVCTAXQS', 'display_mask' => 'date_format(hire_date,"%d %M %Y")', 'calendar' => '%d %B %Y');
      
      $tableName = 'employees';
      $primaryCol = 'id';
      $errorFun = array(&$this,'logError');
      $permissions = 'EAVIDQCSX';
      
      require_once('php/AjaxTableEditor.php');
      $this->Editor = new AjaxTableEditor($tableName,$primaryCol,$errorFun,$permissions,$tableColumns);
      $this->Editor->setConfig('tableInfo','cellpadding="1" width="800" class="mateTable"');
      $this->Editor->setConfig('orderByColumn','first_name');
      $this->Editor->setConfig('addRowTitle','Add Employee');
      $this->Editor->setConfig('editRowTitle','Edit Employee');
   }
   
   
   function Example1()
   {
      if(isset($_POST['json']))
      {
         session_start();
         $this->mysqlConnect();
         if(ini_get('magic_quotes_gpc'))
         {
            $_POST['json'] = stripslashes($_POST['json']);
         }
         if(function_exists('json_decode'))
         {
            $data = json_decode($_POST['json']);
         }
         else
         {
            require_once('php/JSON.php');
            $js = new Services_JSON();
            $data = $js->decode($_POST['json']);
         }
         if(empty($data->info) && strlen(trim($data->info)) == 0)
         {
            $data->info = '';
         }
         $this->initiateEditor();
         $this->Editor->main($data->action,$data->info);
         if(function_exists('json_encode'))
         {
            echo json_encode($this->Editor->retArr);
         }
         else
         {
            echo $js->encode($this->Editor->retArr);
         }
      }
      else if(isset($_GET['export']))
      {
         session_start();
         ob_start();
         $this->mysqlConnect();
         $this->initiateEditor();
         echo $this->Editor->exportInfo();
         header("Cache-Control: no-cache, must-revalidate");
         header("Pragma: no-cache");
         header("Content-type: application/x-msexcel");         
         header('Content-Type: text/csv');
         header('Content-Disposition: attachment; filename="'.$this->Editor->tableName.'.csv"');
         exit();
      }
   }
}
$lte = new Example1();
?>
admin
Site Admin
 
Posts: 1502
Joined: Fri Jul 11, 2008 1:34 am

Re: How To Include Mate In Existing Web Page

Postby yamkopp » Sun Apr 10, 2011 8:31 am

Hello,

the previous code works with the freeware version but refuse to work with the paid version:
"There was a problem with the response text"
and the text content of the html file is shown in a separate window.
Let me ask you to check it once more.

This post is very important in that permit to easily integrate mate in a complex application using the MVC pattern. In the past I missed it and used the ugly iframe solution.

Luigi
yamkopp
 
Posts: 31
Joined: Sun Jan 24, 2010 11:20 am

Re: How To Include Mate In Existing Web Page

Postby admin » Tue Apr 26, 2011 5:23 pm

For the paid version you need to make a few modifications:

1. Remove the body onload tag. Change
Code: Select all
<body onload="toAjaxTableEditor('update_html','');">

to
Code: Select all
<body>

2. Modify javascript to set the ajax url and initiate mate. Change
Code: Select all
        <!-- Set ajax url -->
        <script type="text/javascript">
            trackHistory = false;
            var ajaxUrl = 'TableEditorConfig.php';
        </script>

to
Code: Select all
   <?php
   // Set default session configuration variables here
   $defaultSessionData['orderByColumn'] = 'first_name';

   $defaultSessionData = base64_encode(json_encode($defaultSessionData));
   
   $javascript = '   
      <script type="text/javascript">
         setAjaxInfo({url: "TableEditorConfig.php", history: true});
         if(ajaxInfo.history == false)
         {
            toAjaxTableEditor("update_html","");
         }
         else if(window.location.hash.length == 0)
         {
            var defaultInfo = {info: "", action: "update_html", sessionData: "'.$defaultSessionData.'"};
            window.location.href = window.location.href+"#"+Base64.encode(Object.toJSON(defaultInfo));
         }
      </script>';
   echo $javascript;
   ?>


The existing web page will have to be able to execute php for the default session data to be encoded properly. If it is a static html page you can run the following code in a separate php page and then paste the result into the static page.
Code: Select all
   <?php
   // Set default session configuration variables here
   $defaultSessionData['orderByColumn'] = 'first_name';

   echo base64_encode(json_encode($defaultSessionData));
   ?>
admin
Site Admin
 
Posts: 1502
Joined: Fri Jul 11, 2008 1:34 am

Re: How To Include Mate In Existing Web Page

Postby yamkopp » Tue Apr 26, 2011 7:25 pm

Thank you for the reply. Unfortunately it does not work.
I have created a TableEditorConfig.php file as you have indicated
Code: Select all
<?php
require_once('Common.php');
class Example1 extends Common
{
   function initiateEditor()
   {
      $tableColumns['id'] = array('display_text' => 'ID', 'perms' => 'TVQSX');
      $tableColumns['first_name'] = array('display_text' => 'First Name', 'perms' => 'EVCTAXQS');
      $tableColumns['last_name'] = array('display_text' => 'Last Name', 'perms' => 'EVCTAXQS');
      $tableColumns['email'] = array('display_text' => 'Email', 'perms' => 'EVCTAXQS');
      $tableColumns['department'] = array('display_text' => 'Department', 'perms' => 'EVCTAXQS', 'select_array' => array('Accounting' => 'Accounting', 'Marketing' => 'Marketing', 'Sales' => 'Sales', 'Production' => 'Production'));
      $tableColumns['hire_date'] = array('display_text' => 'Hire Date', 'perms' => 'EVCTAXQS', 'display_mask' => 'date_format(hire_date,"%d %M %Y")', 'calendar' => '%d %B %Y');
     
      $tableName = 'employees';
      $primaryCol = 'id';
      $errorFun = array(&$this,'logError');
      $permissions = 'EAVIDQCSX';
     
      require_once('php/AjaxTableEditor.php');
      $this->Editor = new AjaxTableEditor($tableName,$primaryCol,$errorFun,$permissions,$tableColumns);
      $this->Editor->setConfig('tableInfo','cellpadding="1" width="800" class="mateTable"');
      $this->Editor->setConfig('orderByColumn','first_name');
      $this->Editor->setConfig('addRowTitle','Add Employee');
      $this->Editor->setConfig('editRowTitle','Edit Employee');
   }
   
   
   function Example1()
   {
      if(isset($_POST['json']))
      {
         session_start();
         $this->mysqlConnect();
         if(ini_get('magic_quotes_gpc'))
         {
            $_POST['json'] = stripslashes($_POST['json']);
         }
         if(function_exists('json_decode'))
         {
            $data = json_decode($_POST['json']);
         }
         else
         {
            require_once('php/JSON.php');
            $js = new Services_JSON();
            $data = $js->decode($_POST['json']);
         }
         if(empty($data->info) && strlen(trim($data->info)) == 0)
         {
            $data->info = '';
         }
         $this->initiateEditor();
         $this->Editor->main($data->action,$data->info);
         if(function_exists('json_encode'))
         {
            echo json_encode($this->Editor->retArr);
         }
         else
         {
            echo $js->encode($this->Editor->retArr);
         }
      }
      else if(isset($_GET['export']))
      {
         session_start();
         ob_start();
         $this->mysqlConnect();
         $this->initiateEditor();
         echo $this->Editor->exportInfo();
         header("Cache-Control: no-cache, must-revalidate");
         header("Pragma: no-cache");
         header("Content-type: application/x-msexcel");         
         header('Content-Type: text/csv');
         header('Content-Disposition: attachment; filename="'.$this->Editor->tableName.'.csv"');
         exit();
      }
   }
}
$lte = new Example1();
?>

and then a TableEditorConfig_view.php file
Code: Select all
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <title>Untitled Document</title>

            <!-- Link to editor files -->
            <link href="css/table_styles.css" rel="stylesheet" type="text/css" />
            <link href="css/icon_styles.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="js/prototype.js"></script>           
            <script type="text/javascript" src="js/ajax_table_editor.js"></script>
           
            <!-- Link to calendar files if needed -->
            <!--<link rel="stylesheet" type="text/css" media="all" href="js/jscalendar/skins/aqua/theme.css" title="win2k-cold-1" />
            <script type="text/javascript" src="js/jscalendar/calendar.js"></script>
            <script type="text/javascript" src="js/jscalendar/lang/calendar-en.js"></script>
            <script type="text/javascript" src="js/jscalendar/calendar-setup.js"></script>-->
           
            <!-- Set ajax url -->
 <?php
   // Set default session configuration variables here
   $defaultSessionData['orderByColumn'] = 'first_name';

   $defaultSessionData = base64_encode(json_encode($defaultSessionData));
   
   $javascript = '   
      <script type="text/javascript">
         setAjaxInfo({url: "TableEditorConfig.php", history: true});
         if(ajaxInfo.history == false)
         {
            toAjaxTableEditor("update_html","");
         }
         else if(window.location.hash.length == 0)
         {
            var defaultInfo = {info: "", action: "update_html", sessionData: "'.$defaultSessionData.'"};
            window.location.href = window.location.href+"#"+Base64.encode(Object.toJSON(defaultInfo));
         }
      </script>';
   echo $javascript;
   ?>           
        </head>
       
        <!-- Call js function on load -->
        <body>
           
            <!-- Original html content -->
            <p>This is the original web page html</p>
            <!-- End original html content -->
           
            <!-- Editor HTML -->
            <div id="historyContainer">
                <div id="information">
                </div>
           
                <div id="titleLayer" style="padding: 2px; font-weight: bold; font-size: 18px; text-align: center;">
                </div>
           
                <div id="tableLayer" align="center">
                </div>
               
                <div id="recordLayer" align="center">
                </div>     
               
                <div id="searchButtonsLayer" align="center">
                </div>
            </div>
            <!--  End editor HTML -->
           
            <!-- Original html content -->
            <p>This is the original web page html</p>
            <!-- End original html content -->
           
        </body>
    </html>

When I run it the result is:
<<Trying to get property of non-object in <b>C:\wamp\www\matetest\php\AjaxTableEditor.php</b> on line <b>324</b>
<b>Notice</b>: Trying to get property of non-object in <b>C:\wamp\www\matetest\php\AjaxTableEditor.php</b> on line <b>325</b>
[{"where":"javascript","value":"alert('Error in program action not found.');"},
{"where":"javascript","value":"storeSessionData('bnVsbA==');"}]>>

Then I tried the second way. I got the following code: eyJvcmRlckJ5Q29sdW1uIjoiZmlyc3RfbmFtZSJ9
and pasted it in TableEditorConfig.html file
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Untitled Document</title>

        <!-- Link to editor files -->
        <link href="css/table_styles.css" rel="stylesheet" type="text/css" />
        <link href="css/icon_styles.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/prototype.js"></script>           
        <script type="text/javascript" src="js/ajax_table_editor.js"></script>
       
        <!-- Link to calendar files if needed -->
        <!--<link rel="stylesheet" type="text/css" media="all" href="js/jscalendar/skins/aqua/theme.css" title="win2k-cold-1" />
        <script type="text/javascript" src="js/jscalendar/calendar.js"></script>
        <script type="text/javascript" src="js/jscalendar/lang/calendar-en.js"></script>
        <script type="text/javascript" src="js/jscalendar/calendar-setup.js"></script>-->
       
        <!-- Set ajax url -->
      <script type="text/javascript">
         setAjaxInfo({url: "TableEditorConfig.php", history: true});
         if(ajaxInfo.history == false)
         {
            toAjaxTableEditor("update_html","");
         }
         else if(window.location.hash.length == 0)
         {
            var defaultInfo = {info: "", action: "update_html", sessionData: "'eyJvcmRlckJ5Q29sdW1uIjoiZmlyc3RfbmFtZSJ9'"};
            window.location.href = window.location.href+"#"+Base64.encode(Object.toJSON(defaultInfo));
         }
      </script>';   
    </head>
    <!-- Call js function on load -->
    <body>
        <!-- Original html content -->
        <p>This is the original web page html</p>
        <!-- End original html content -->
       
        <!-- Editor HTML -->
        <div id="historyContainer">
            <div id="information">
            </div>
       
            <div id="titleLayer" style="padding: 2px; font-weight: bold; font-size: 18px; text-align: center;">
            </div>
       
            <div id="tableLayer" align="center">
            </div>
           
            <div id="recordLayer" align="center">
            </div>     
           
            <div id="searchButtonsLayer" align="center">
            </div>
        </div>
        <!--  End editor HTML -->
       
        <!-- Original html content -->
        <p>This is the original web page html</p>
        <!-- End original html content -->
       
    </body>
</html>

with error "There was a problem with the response text..." showing the TableEditorConfig.php file.
By the way, the table employees is shown correctly in a normal setup with the paid version. On my server I tried PHP 5.3 and PHP 5.2.11 without success.
Have you some other suggestion?
Luigi
yamkopp
 
Posts: 31
Joined: Sun Jan 24, 2010 11:20 am

Re: How To Include Mate In Existing Web Page

Postby admin » Mon May 02, 2011 3:09 pm

The problem is that in the TableEditorConfig.php construct you have the free version code instead of the paid version code. Try switching it and see if it works. For more info see http://mysqlajaxtableeditor.com/Documentation.php#paid
admin
Site Admin
 
Posts: 1502
Joined: Fri Jul 11, 2008 1:34 am

Re: How To Include Mate In Existing Web Page

Postby yamkopp » Mon May 02, 2011 7:12 pm

admin wrote:The problem is that in the TableEditorConfig.php construct you have the free version code instead of the paid version code. Try switching it and see if it works. For more info see http://mysqlajaxtableeditor.com/Documentation.php#paid


Yes, now it works. I had to update the constructor of the class.
Thanks a lot!
Luigi
yamkopp
 
Posts: 31
Joined: Sun Jan 24, 2010 11:20 am

Re: How To Include Mate In Existing Web Page

Postby robertg007@me.com » Mon Jul 11, 2011 10:05 am

I have tried to intergrate the table into my existing webpage but as yet have not managed it, could someone offer the full code for the professional version so that I can check the cause of the issue.

When I run the code I get "error in program action not found." in a pop up. I am working the files from the mate folder so have not changed any files from the example code.
The examples all run fine too.
robertg007@me.com
 
Posts: 1
Joined: Mon Jul 11, 2011 9:50 am

Re: How To Include Mate In Existing Web Page

Postby RisoSystems » Sun Jul 31, 2011 5:22 pm

I'm where Luigi was - the error message "there was a problem with the response text".
I'm using the AjaxTableEditor.php and ajax_table_editor.js files which were in the mate-3.2.zip file, and have made the edits you list in the forum. I've also run the standalone script and verified by looking at the page source that the correct $defaultsessiondata string is being generated.
I've never installed the free version, so unless you've mixed files from both versions in the distribution, I don't see how that could be a factor.
Would it be possible for you to post the edited files so we can be sure there's no misunderstanding? What else could be causing the problem?
RisoSystems
 
Posts: 1
Joined: Sun Jul 31, 2011 4:30 pm

Re: How To Include Mate In Existing Web Page

Postby edwardsmarkf » Sun Jun 03, 2012 9:29 pm

this looks like it could be very useful. is there any chance of seeing a working example available?
edwardsmarkf
 
Posts: 54
Joined: Fri Jun 10, 2011 11:03 pm

Re: How To Include Mate In Existing Web Page

Postby KarelB » Tue Jun 05, 2012 7:57 am

The two demo examples in the MATE website show this feature.
KarelB
 
Posts: 458
Joined: Mon Dec 01, 2008 11:49 pm
Location: The Netherlands

Next

Return to How To

Who is online

Users browsing this forum: Bing [Bot] and 3 guests

cron