Amazon EC2 - publishing your website security group and port setting

If you cannot successfully see your webpage on internet but able to see it in the local remote server like me, it's probably about the tcp port 80 has not been open to public in your security group that is assigned to your instance.

Now, go to the AWS Management Console.

At the initial setting, the Amazon setup for my server instance, the security group is assigned to 'quicklanuch-1' .

Then, click on 'Security Groups' under 'Network & Security' on the left panel.
you should find your security group name there.

Select your security group name, and you can find the 'Detail' tab and 'Inbound' tab in the bottom panel.

In the 'Inbound' Tab, Add a custom TCP rule with port 80, then enjoy!

Amazon EC2 SQL Server Express local instance name

Finally, I decided to put my works to a public hosting server, in order to see how it performs on the world wide web.

After a day or two of reading the users' reviews and comparing the prices, I decided to give Amazon a try, since it offers 'monthly free tier' plan a year for the new user. It's almost free of charge if your system configuration, loading and usage is under their offering limit.

This is prefect for me since my testing data under 4Gb, and I just want to test how's the system working under a remote server at this state.

After spending some hours to set up PHP under IIS 7.5 on windows 2008 R2, I started to move my testing data to the SQL server Express. However, the weird thing is the SQL Manager cannot see the local instance in the drop-down list box. The lucky thing is I'm not alone, and found the answer on the AWS forum.

Just type in (local)\ec2sqlexpress as the server name and here you go.

jqgrid - column/cell with jquery autocomplete

I implemented a column with autocomplete in afterEditCell event and it works well!

var grid = $('#mygrid');

if (cellname=='myColumnName') {
                $("#"+iRow+"_"+cellname,"#grid1).autocomplete({
                    source: cList, //a json data from ajax and stored in javascript array, you can see how I get it from my previous post.
                    select: function( event, ui ) {
                        $(this).val( ui.item.value ); 
                        grid.saveCell(rowid,iCol);
                        return false;
                    }               
                }).data("autocomplete")._renderItem = function( ul, item ) {
                        return $( "<li></li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a>" + item.label + "</a>" )
                            .appendTo( ul );
                }
            }

jquery ui autocomplete json setup key, "value"

 jquery autocomplete is easy to use and setup. The only thing I had spent time to figure out how it works is the configuration of the json. You must label the 'value' in the json, since I had used 'key' at the first time and it didn't work.

json example:
[{value:'ABC', label:'ABC company'},{value:'BBC',label:'BBC company'},...]

The 'value' is the item back to your input box when you selected from the list, and the 'label' is the item you see in the list.

The following is the example I implemented in the script:
$("#input1").autocomplete({
                    minLength: 0,
                    source: cList, //a json return from ajax
                    select: function( event, ui ) {
                        $(this).val( ui.item.value ); 
                        return false;
                    }               
                }).data("autocomplete")._renderItem = function( ul, item ) {
                        return $( "<li></li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a>" + item.label + "</a>" )
                            .appendTo( ul );
                }

TCPDF - Chinese encoding UTF-08 fonts

At first, I was looking for FPDF instead of TCPDF, since FPDF seems light weighter than TCPDF, and people told their experience that TCPDF seems taking a bit longer processing time.

However, since my project requires to show the Chinese Characters, I found that I don't feel FPDF has sufficient support on UTF-08 encoding of Chinese Characters.

Then, I tried TCPDF and found that they give many examples on their webpage and show their product features. This helps me a lot to understand how it works and how to code.

The Chinese character encoding is pretty easy with the setting of UTF-08 and choosing the appropriate fonts, 'stsongstdlight' or 'kozminproregular'.

e.g.
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

For displaying traditional Chinese characters, I recommend to use font, 'kozminproregular'; 'stsongstdlight' is better for displaying simplified-Chinese characters.

e.g.
$pdf->SetFont('kozminproregular', '', 10);

Updated: 2013-05-02
Lastly, I found 'cid0cs' and 'cid0ct' work better.

jquery ui tab - add close icon to a dynamic added tab

I dynamically added tabs as the following way:


tabpgIndex++;
href="#tabpg"+tabpgIndex;
var title = 'New Tab-'+tabpgIndex;
$('#tabs').append('<div id="tabpg'+tabpgIndex+'">{content}</div>'); //you can add your content here, or any dynamic content you want after this body've been build.

$('#tabs').tabs( 'add', href, title);  //jquery ui tab method

$('#tabs ul li a span').last().prepend('<span id="closeicon-'+tabpgIndex+'" class="ui-icon ui-icon-circle-close" style="float:right; cursor: pointer;"></span>'); // prepend the close icon with an id, so it attached to the right of the tab title without a line break

//with the id I given, I managed a click event to it, like this:
$('#tabs ul li a').on('click','#closeicon-'+l_tabpgIndex,function(){
        alert('close icon clicked');
        //close this tab.
 });

I don't know whether it works for you or not in your case, but it works for me, and hope it will work for you too.

jquery tab - check existing tab by tab lable/title

function checkTabExists(tabname) {
    var tabExists = false;
    $('#tabs ul li a').each(function(i) {
        if (this.text == tabname) {
            tabExists = true;
            $("#tabs").tabs("select", i); // if found, I immediately select to the tab.
        }            
    });  
    return tabExists;
}