Project Euler and Me

Thanks to Ailin and Adam that introduce me the Project Euler and now I am totally addicted with it. After 8 years not using C as my primary programming language, is time for me to pick it up and do something with C ideology - small footprint with great performance!

Below is the question from Project Euler and the code I had written to solve it. Feel free to download them then make it better or give comment and suggestion on the solution. Programmer ROCKS!

FORM validation with jquery.ajax

When <FORM> validation meet the JQUERY.AJAX

Below are the basic <FORM> with validation before the form submitted.

1  <script>
2    function validateform() {
3       $.ajax({
4           type: "POST",
5           url: "/country/checkcountry",
6           data: "code="+countrycode+"&name="+countryname,
7           dataType: 'json',
8           success: function (data, status)  {
9               if (data.result != 'OK') {
10                 console.log('check ok'); 
11                 return false
12              } else {  
13                 console.log('check not ok'); 
14                 return true
15              }
16          },
17          error: function (data, status) {
18              console.log('check error') 
19              return false
20          }
21      });         
22      console.log('should never show');
23   
24      return false; //For testing purpose, it should be return true
25   }
26 </script>
27
28 <FORM action="/country/addcountry" method="post" onsubmit="return validateform()">
29     ..........................
30 </FORM>


At the first glance, the java script seem logically fine. Actually, there are TWO major issue in that java script!

Document.getElementById return null

The problem
Document.getElementById() - The most useful and common use features while developing in javascript. Some how this function call will failed unexpected without any javascript error. The most common error for this function is returning a NULL even we can 100% confirm the element with correct ID is there!

The catch
Come on, this is not a browser issue nor javascript issue. There are few possible that trigger this issue. Listed below is what I faced before, if you have more please share by replying a comment. TQ.

1.  ID had been used more than once in a HTML page
Check is the ID the element has been used more than once in a HTML. The most easier way to debug is right click on the web browser and click VIEW SOURCE (CTRL U). From there use the find tool to search for the ID that document.getElementById() cannot found.

2. Nested <FORM> 
document.getElementById() return null while trying to get a <FORM> element? Make sure that the <FORM> element you try to get is not under another <FORM> element! This error is usually happen while using PHP framework or template based framework.

Try to move the inner <FORM> element out from the parent form. For Symfony PHP framework, sometime this is hard to archive because we are good programmer that make our code modular enough to screw ourselves up :P . In this case, you can use the SLOT concept in Symfony to solve this problem.

You know something is not listed here, please reply a comment to share. TQ.

Useful Coding Tools and JavaScript Libraries For Web Developers - Smashing Magazine

Useful Coding Tools and JavaScript Libraries For Web Developers - Smashing Magazine:

'via Blog this'

Lessons From A Review Of JavaScript Code - Smashing Coding

Lessons From A Review Of JavaScript Code - Smashing Coding:

'via Blog this'

Supporting Your Product: How To Provide Technical Support - Smashing Magazine

Supporting Your Product: How To Provide Technical Support - Smashing Magazine:

'via Blog this'

Free Download: Cheat Sheet For Designing Web Forms - Smashing UX Design

Free Download: Cheat Sheet For Designing Web Forms - Smashing UX Design:

'via Blog this'

Panes Freezer - The jquery plugin

About

When working with large table, it gets a bit frustrating, when you go to read the data in a distant row or column and the headings at the top of the page or down the side of the sheet disappear.

If you are like me, you're never quite sure if you are looking in the right spot so you scroll back and forth trying to read first the heading and then the data, heading then the data, until you're almost sure you have it right.

To avoid this back and forth waste of time, use this jquery plugin. This plugin allows you to lock specific rows and columns so that they will always be visible on screen no matter how far you scroll to the right or down.

Idea of this plugin is no existing coding modification need to be done, just with additional <DIV> and call the plugin code shown below, that's all!

$('#mydiv_1_0').panesfreezer({
    'headerrow': 1,
    'headercolumn' : 1
});

Demo

• Table with no style
• Table with style

Supported browser

Below table show the supported browser for this plugin

No	Browser	Version	OS	Support
1	Google Chrome	14.0.835.202 m	Windows 7	Y
2	Firefox	7.0	Windows 7	Y
3	Safari	5.1	Windows 7	Y
4	Internet Explorer	9	n/a	n

Links

jquery plugin page - http://plugins.jquery.com/project/panesfreezer
Github page - https://github.com/comcrazy/Panes-Freezer/
Author blog - http://comcrazy-devcenter.blogspot.com/ @ http://comcrazy.info/

MySQL Schema and Index Optimization Example

Transaction logging is a essential activity for telco industry. These records are important to resolve customer dispute or technical support activity. This post will discuss about MySQL schema and index optimization on a table that store huge amount (20 Millions ++ per day in one table) of transaction record.

Javascript Multi-Dimension Array to JSON Converter

The Problem
Lately ask by one of my programmer - How to pass a javascript multi-dimension array back to PHP? First thing strike in my mind, JSON.stringify! But after some quick reading and testing, found out that stringify does not support cyclic data structures.

Then brainstorming session begin. Why need to pass in multi-dimension array, why not this and why not that... And last, he just said "This is the way I want, can you make it happen or not?".

Thanks for his challenge, here by is the solution.

Path Finding in PHP

Lately create a path finding algorithm example using PHP for my junior to refer. Hopefully this code will also benefit others who look for same solution.

Symfony Admin Generator Framework Skeleton

Symfony is a very useful PHP framework, specially the admin generator features! Just define the database schema, run few command and without writing a single code (errr.... sort of) the basic CRUD (Create Read Update Delete) functionality is ready! In addition, table listing, search features (with filtering function) and batch action is there too! It's amazing and thanks to Symfony developer effort on this.

However, the output still lack of other essential features like

• Site header and site footer
• User authentication, user account, user permission and user group.
• Menu system
• and so on....

PHP Pear Mail Test Kit

Requested by the support team, I had build a PHP page that able to test the functionality of the PHP Pear Mail module.



The features included

• Validate installation of PEAR
• Validate installation of PEAR Mail module
• Support all send mail options that supported by PEAR Mail - mail, direct sendmail, SMTP.
• Enable or disable SMTP authentication.
• Full validation on user input
• ALL in a SINGLE file, easy to install.

Enhancement of jquery datetime plugin

The problem
Lately integrate jquery datetime v1.0.5 plugin (http://plugins.jquery.com/project/datetime) into my web app to let user choose both date and time. When using it, found a problem if below conditions is applied.

1. Min date and Max date is set.
2. Default date and time is the middle of min and max date and the default date is following month of min date.
3. e.g. Min date is 28/04/2011, Max date is 30/06/2011 and default date is 30/04/2011 16:00.

The problem are

1. The calender shown May calender as expected but the previous button is disable and user cannot back to April which the Min date is set.
2. User can forward to additional two months after the Max date month, which mean this case the next button only disable when user access until month of August. However, user still cannot choose the date after the Max date.

Excel column label calculation (increment)

Sharing out the code that calculate the excel column label by increment. Suitable for any version of excel.

IE8 : jquery : ajaxfileupload : Syntax Error: Unterminated string constant

The problem
Write a web app to upload a file, read the content then return the content in HTML table using JSON format then display the result dynamically at current HTML page. Below is the JSON return by a PHP script.

{filename: 'input.dat',total_recipient: '1',totalcolumn: '3',samples: '<table width="400px"><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr></thead><tbody><tr><td>name</td><td>phone no</td><td>address</td></tr></tbody></table>',columntag: '{Col_1},{Col_2},{Col_3},'}

As usual it work perfectly on FF 3.5.3, but when come to IE8 I got the error message "Syntax Error: Unterminated string constant".

IE8 : Object doesn't support this property or method

The problem
Try to load following html to IE8 then insert some text to the input box and click the button. It should just alert the text you had key in but it give a javascript error "Object doesn't support this property or method". Below code work perferly on FF 3.5.3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>ID Test</TITLE>
<script type="text/javascript">
function testnow()
{
 inputvalue = document.getElementById('inputvalue').value;
 alert ("input value is ["+inputvalue+"]");
}
</script></HEAD>
<BODY>
<H3>Input Text</H3>
<input id="inputvalue" type="tet"></input>
<BR/>
<button onclick="testnow()">click me</button>
</BODY></HTML>