Cohesive Web

The best example of auttosuggest filed I can instantly think of is Google. While designing dynamic forms I felt the requirement of such field. As I mostly use PEAR class and HTML Quickform to design dynamic forms in php. However in HTML Quickform there is autocomplete type but still there is no support for autosuggest. I googled a lot to get such support, but found it out in RFC of HTML Quickform. So I started working upon it. My first job was to found out a autosuggest Javascript code suitable for integration. I searched out an autocomplete javascript code by Beau D. Scott

The reasons why I selected Beau’s code is :
The code is simple to use but robust and has good documentation.
It uses standard JS library like prototype and scriptaculous.

Now having previous knowledge of integration of QuickForm and Jscalender I created the code for autosuggest class. This autosuggest class file contains constructor function, toHtml function which generates the HTML code for the field, getFrozenHtml function to return the autosuggest content in HTML and finally the registering process of the autosuggest type with HTML QuickForm. I put this autosuggest class name as autosuggestwce. View this wceautosuggest.php file.

To use this autosuggest field in HTML Quickform you need to have 3 javascript files as prototype.js, scriptaculous.js and autocomplete.js. Prototype Javascript is used for javascript framework, Scriptaculous for show and hide effect and AutoComplete is the main javascript functionality file. Among them scriptaculous.js can be removed if you don’t like to show effects, but you need to modify certain section in the wceautosuggest.php file. You also need to declare $GLOBALS['_HTML_QUICKFORM_AUTOSUGGEST_BASEPATH'] the global path defining variable for the javascript files path in the page where you will generate the form.

This autosuggest uses php script to populate values. The name of the php script has to be mentioned in the $attribute array for the key ‘fileref’.

If you are using DB_Table here is snippet of code

'user_name' => array(
'type' => 'varchar',
'size' => 255,
'qf_type' => 'autosuggestwce',
'qf_label'=> 'UserName:',
'require' => false,
'qf_attrs' => array(
'id' => 'user_name_autosuggest',
'autocomplete' => 'off',
'fileref' => 'getusersname.php',
),
),

If you are using QuickForm directly then here is the code snippet

$form = new HTML_QuickForm('someTest', 'get');
$form->addElement('autosuggestwce', 'username', 'UserName:', "array('id' => 'user_name_autosuggest', 'autocomplete' => 'off', 'fileref' => 'getusersname.php')");
$form->display();

Here is the code segment of php script

<?php
$UsrObj = new CLUsrChk($DBObj, 'hllqz_tblusers');
$SqlStatement = "SLECT user_name FROM ".$UsrObj->table." WHERE user_name LIKE ('".$_GET['s']."%')";
$UsrNameArray = $UsrObj->bd->query($SqlStatement);
echo json_encode($UsrNameArray);
?>

Here is the screenshot

However if you require the files for your reference please let me about that.

I was planning to do this post almost a month ago but I was busy with learning another Javascript framework jQuery. I am started loving it. Hope I will be able to post something about jQuery in near future.

Most of us are familiar with calendars in web pages. Small calendar showing date and year are really good to see and useful too. While in case of forms we have seen calendars attached with date fields. In some of my earlier projects I have designed date fields using simple drop down menu containing the data, month and year menu. It’s good but not very user friendly as user need to select 3 menus to choose a certain date. I had to stick with that format as I mostly use PEAR HTML_QuickForm to design forms in the web pages. Among many reasons the most unavoidable one is that it automatically generates client side validation JavaScript code. With time I realized that I should find some options to integrate calendar object with the QuickForm.

After giving a thorough search I selected jscalendar to incorporate with my form elements. The reasons behind selecting jscalendar are:

• It has a nice interface and wide variety of themes.
• Multiple integration options along with selectable date format to put the date in the text field.
• Support for integrating the calendar object with HTML_QuickForm.

Prior to integrate the jscalendar I need to upgrade HTML_QuickFom version to 3.2.10 as I found some code added in this version to support jscalendar. I also need to upgrade my PEAR DB package to version 1.7.13 and DB_Table to version 1.5.5. In my projects most of the cases I generate forms using DB_Table instead of using QuickForm directly. This gives an extra benefit for data validation and storing them in database.

After the up-gradating the required pear packages I worked upon integrating the jscalendar code. After a spending a moderate amount of time I was able to work jscalender with the QuickForm. But unfortunately when I was trying generate forms using DB_Table jscalendar component was not working. I was getting javascript errors.
I was following the method described by Philippe Jausions of 11abacus in jscalendar.php file. It was working fine with the QuickForm. In that case I was using addElements function to add jscalendar with proper options using the $option array like this –


$options = array(
'baseURL' => '../js/jscalendar/',
'styleCss' => 'calendar-win2k-1.css',
'language' => 'en',
'button' => '',
'setup' => array(
'inputField' => 'datefield1',
'ifFormat' => '%d.%m.%Y %H:%M',
'showsTime' => true,
'time24' => true,
'weekNumbers' => false,
'showOthers' => true
),
);
$form->addElement('jscalendar', ' datefield1', 'My Date', $options);


I used this same option array in the column definition for the same field, as DB_Table uses the column definition for the attributes of the form elements of the form. I written like


'datefield1' => array(
'type' => 'varchar',
'size' => 20,
'qf_type' => 'jscalendar',
'qf_label'=> '<span class="caption">Date:</span>',
'require' => false,
'qf_attrs' => array('class'=> 'formfield','id' => 'datefield1'),
'qf_opts' => array(
'baseURL' => '../js/jscalendar/',
'styleCss' => 'calendar-win2k-1.css',
'language' => 'en',
'button' => '',
'setup' => array(
'inputField' => 'listadata',
'ifFormat' => '%d.%m.%Y %H:%M',
'showsTime' => true,
'time24' => true,
'weekNumbers' => false,
'showOthers' => true
),
),
'qf_client'=> true,
'qf_rules' => array(
'required' => 'Date is required.',
),
),


It didn’t worked and also gave the javascript error as calendar.Setup – no such method found….
Now I started working on how to fix this problem. I started checking the all the codes thoroughly and found that using QuickForm from DB_Table setting all these options can’t be done. After spending some upon those codes I rewrite the column definition like this


'datefield1' => array(
'type' => 'varchar',
'size' => 20,
'qf_type' => 'jscalendar',
'qf_label'=> '<span class="caption">Date:</span>',
'require' => false,
'qf_attrs' => array('class'=> 'formfield','id' => 'datefield1'),
'qf_opts' => array(
'ifFormat' => '%d.%m.%Y',
'showsTime' => false,
'time24' => false,
'weekNumbers' => false,
'showOthers' => false,
'button' => '',
),
'qf_client'=> true,
'qf_rules' => array(
'required' => 'Date is required.',
),
),


Also I declared the global path defining variable in the page where I was generating the form. I defined


$GLOBALS['_HTML_QUICKFORM_JSCALENDAR_BASEPATH'] = "/js/jscalendar/";


Oh that time it worked. It showed the small calendar while the clicking the small button beside the text field for data. But I wasn’t still happy with it. What I found that the calendar was coming but it wasn’t using any style and dates are raveling upon a transparent layer, making it too ugly. I tried to define the style using style class/ stylesheet file name in different places as different parameter. But nothing worked. Now I had two options then

Define the stylesheet for the calendar within the head tags of the page containing the form, means hardcode the name of the stylesheet.
Change the coding to accommodate to options for setting the style class for the calendar.

Selecting the 1st option means loosing some dynamicity and selecting the 2nd option means I need to change or modify certain code in pear class package files. So it was difficult to select any option. I was investigating the benefits and the hitches which can come out as a result of using any one of those options. Also side by side I was looking for third other option which can be better then these two. I spent almost two days and came up with a decision of selecting the second option. I decided to add two lines of code in the QuicfForm.php file in the DB package as


if(isset($col['qf_theme'])) {
$element->theme = $col['qf_theme'];
}


Also I have added one more element in column definitions for the date field as


'datefield1' => array(
…… …….
…… …….
'qf_theme' => 'calendar-win2k-2',
),


Now my problem is solved and the jscalendar is working seamlessly with the QuickForm from the DB_Table package too.

My opinion is if you like to add the two lines of code in QuickForm.php file you can add it but you need to remember it at the time when you upgrade the pear package. Also you need to check if it works properly or not. The other way is to hardcode the stylesheet file within the head tag part of the page where you will go to generate the form. In this case you will surely loose some dynamicity but this is easier to work with. Choice is yours.

Currently I am working upon another important issue in php. I need some time to accomplish this job. I will discuss this issue too cause I find it very interesting. However if you find this above discussion useful then I might expect your comment here. Suggestion and queries are also welcome.