Decoupling the development of front end and back end

We used to develop the entire system using ASP.Net web form or MVC. It sounds logical to build everything with the back end coding except for some validation processes using JavaScript (which runs in the client browser).

The problem with this approach is that it's very hard to shorten the development time because the file sharing is the big headache when the team gets bigger. Parallel development requires massive collaboration.

For example, you want to develop an Online Shopping cart which has the catalog for public access. If you are using ASP.Net web form to develop the system, the front end and the back end will be either in one file (ASPX) or two files (ASPX + ASPX.CS). If you are using MVC, it's very hard to to sync the source codes among the programmer because it has controller, page, style, etc.

To enable the parallel development, the front end and the back end should be decoupled.

• The front end should be build from the scratch with HTML, CSS + JavaScript. 
• The back end will be develop in Generic Handler (ASHX) in ASP.Net/C#. This ASHX provides an interface for the client to submit their query, processes by the web server and then response back to the client.

The benefits with this approach:

• The front end developer will have the freedom changing the CSS styles without affecting the back end coding. Rearranging the layout without have to get permission from the back end programmer.
• The back end developer will have to focus on processing the incoming request and response with the appropriate data. Any changes in the back end will not affect the front end.

There is only one thing that both the front end and back end developers must agree: the API style. Whether you want the REST API or a simple URL API (please refers to System design with ASHX web services (JQuery + AJAX + partial HTML UI) ).
 
This is great. Isn't it?

Avoiding uncertainty with "this"

Most of the time, we don't know what is "this"? Is it a "window", jQuery object, or what is it. It is difficult to debug and make the code to work.

One of the easiest solution that I found is to capture the context into "self" and then all public functions to be declared with the object function. For example, sayHelo() will always referring to the same context as you call the setMyName().

function myClass() {
  var self = this;
  var name;

  this.setMyName = function (s) { name = s; };
  this.getMyName = function() { return name; };
 
  this.sayHelo = function() { return self.getMyName(); };

}

var c = new myClass();
c.setMyName('Mickey');
console.log(c.sayHelo());

Changing the URL in the address bar with JQuery

Changing the URL in the address bar with JQuery is quite straight forward. The purpose of this technique is to resolve the user support for the "single page application" (i.e., all contents were loaded by JQuery).

I have modified the technique used by the following article in order to avoid the security error raised by the browser. It appends the "anchor" to the URL.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ChangeUrl(page, url) {
            if (typeof (history.pushState) != "undefined") {
                var i = window.location.href.indexOf('#');
                if (i > 0) {
                    url = window.location.href.substring(0, i) + url;
                }
                else {
                    url = window.location.href + url;
                }
               
                var obj = { Page: page, Url: url };
                history.pushState(obj, obj.Page, obj.Url);
            } else {
                alert("Browser does not support HTML5.");
            }
        }
        $(function () {
            $("#button1").click(function () {
                ChangeUrl('Page1', '#Page1');
            });
            $("#button2").click(function () {
                ChangeUrl('Page2', '#Page2');
            });
            $("#button3").click(function () {
                ChangeUrl('Page3', '#Page3');
            });
        });
    </script>
    <input type="button" value="Page1" id="button1" />
    <input type="button" value="Page2" id="button2" />
    <input type="button" value="Page3" id="button3" />


Reference

http://www.aspsnippets.com/Articles/Change-URL-in-Browser-Address-Bar-without-reloading-using-JavaScript-and-jQuery.aspx

Fixed row and column in HTML with CSS + JavaScript

You cannot achieve the fixed row and column with HTML + CSS. You need the Javascript as well.






Below is the HTML, CSS and Javasript that accomplished the fixed row and column.

 <html lang="en">

<head>
    <script src="js/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        function on_y_scroll(e) {
            var t = $('.tb_cells').scrollTop();
            var l = $('.tb_cells').scrollLeft();

            $('.r_headers').scrollTop(t);
            $('.c_headers').scrollLeft(l);

            console.log('left=' + l.toString() + ',top=' + t.toString());
        }
        $(document).ready(function () {
            $('.tb_cells').scroll(on_y_scroll);
        });
    </script>

    <style>
        .tb {
            background-color: darkgray;
            width: 600px;
            height: 250px;
        }
      
        /* the full row and partial should be hidden */
        .max_row_width {
            width: 500px;
        }
        /* the data row to be partially display on the screen*/
        .max_data_width {
            width: 420px;
        }
        /* the data row height */
        .row_height {
            height: 30px;
        }
        /* the column header height */
        .row0_height{
            height:40px;
        }

        /* for column zero*/
        .cell0 {
            width: 100px;
            background-color: red;
        }

        .tb_col0 {
            float: left;
        }

        .r_headers {
            height: 140px; /*this is the height of 200px (tb_data.height) - 40 (cell0) - 20 (scrollbar) */
            overflow: hidden;
        }

        .row_header {
            background-color: #0094ff;
        }

        /* for row zero */
        .c_headers {
            width: 400px;
            overflow: hidden;
        }

        .col_header {
            width: 100px;
            float: left;
            background-color: green;
            color: white;
        }

        .tb_row0 {
            clear: both;
        }

        /* for data cell */

        .tb_data {
            float: left;
            height: 200px;
            overflow: hidden;
            overflow-x: hidden;
            background-color: yellow;
        }

        .tb_cells {
            float: left;
            height: 160px; /*this is the height of 200px (tb_data.height) - 40 (cell0) - 20 (scrollbar) */
            overflow: hidden;
            overflow-y: auto;
            overflow-x: auto;
            background-color: mediumaquamarine;
        }

        .tb_row {
            clear: both;
        }

        .cell_col {
            width: 100px;
            float: left;

            /* user defined style for the cell content */
            box-sizing: border-box;
            padding-left: 5px;
            padding-right: 5px;
            text-overflow: clip;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <h3>Fixed row and column</h3>

    <div class="tb">

        <div class="tb_col0">
            <!--the first cell-->
            <div class="cell0 row0_height">
                cell 0
            </div>

            <!--the first column-->
            <div class="r_headers">
                <div class="row_header row_height">
                    r 1
                </div>
                <div class="row_header row_height">
                    r 2
                </div>
                <div class="row_header row_height">
                    r 3
                </div>
                <div class="row_header row_height">
                    r 4
                </div>
                <div class="row_header row_height">
                    r 5
                </div>
                <div class="row_header row_height">
                    r 6
                </div>
                <div class="row_header row_height">
                    r 7
                </div>

            </div>

        </div>



        <div class="tb_data max_data_width">

            <!--the column header -->

            <div class="c_headers row0_height">
                <div class="tb_row0 max_row_width row0_height">
                    <div class="col_header row0_height">
                        col 1
                    </div>
                    <div class="col_header row0_height">
                        col 2
                    </div>
                    <div class="col_header row0_height">
                        col 3
                    </div>
                    <div class="col_header row0_height">
                        col 4
                    </div>
                    <div class="col_header row0_height">
                        col 5
                    </div>
                </div>
            </div>


            <!-- data cells -->
            <div class="tb_cells max_data_width">

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell11 very long long long text
                    </div>
                    <div class="cell_col">
                        cell21
                    </div>
                    <div class="cell_col">
                        cell31
                    </div>
                    <div class="cell_col">
                        cell41
                    </div>
                    <div class="cell_col">
                        cell51
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell12
                    </div>
                    <div class="cell_col">
                        cell22
                    </div>
                    <div class="cell_col">
                        cell32
                    </div>
                    <div class="cell_col">
                        cell42
                    </div>
                    <div class="cell_col">
                        cell52
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell13
                    </div>
                    <div class="cell_col">
                        cell23
                    </div>
                    <div class="cell_col">
                        cell33
                    </div>
                    <div class="cell_col">
                        cell43
                    </div>
                    <div class="cell_col">
                        cell53
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell14
                    </div>
                    <div class="cell_col">
                        cell24
                    </div>
                    <div class="cell_col">
                        cell34
                    </div>
                    <div class="cell_col">
                        cell44
                    </div>
                    <div class="cell_col">
                        cell54
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell15
                    </div>
                    <div class="cell_col">
                        cell25
                    </div>
                    <div class="cell_col">
                        cell35
                    </div>
                    <div class="cell_col">
                        cell45
                    </div>
                    <div class="cell_col">
                        cell55
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell16
                    </div>
                    <div class="cell_col">
                        cell26
                    </div>
                    <div class="cell_col">
                        cell36
                    </div>
                    <div class="cell_col">
                        cell46
                    </div>
                    <div class="cell_col">
                        cell56
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell17
                    </div>
                    <div class="cell_col">
                        cell27
                    </div>
                    <div class="cell_col">
                        cell37
                    </div>
                    <div class="cell_col">
                        cell47
                    </div>
                    <div class="cell_col">
                        cell57
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

Printing without the URL at the page header

Below is the sample HTML which will hide the URL at the page header when printing with Javascript.


   <html moznomarginboxes >
   <head>
   <style type="text/css">

      @page{                size: auto;                margin: 3mm;           }

   </style>
   </head>
   <body>
         My page content goes here..
   </body>
   </html>


The simple way to print the current page is to call the following JavaScript method:

   window.print();

The Javascript library to print the specific element/container:

  https://github.com/jasonday/printThis

Detecting date selection in the JQuery datepicker control

The following function will attached the callback function to the JQuery datepicker control whenever the user choose a date from the popup:

function dt_attach_value_change_event(ctl_id, callback) {
    $(ctl_id).datepicker("option", "onSelect", callback);
}

Close popup div when clicked outside

Below is the script that solves the mentioned problem. I have not personally tested the code. You might want to try it out yourself.

$(function(){
   $("#btnFieldWorkers").click(function(e){       
       e.stopPropagation();
       $("#div_fieldWorkers").show();
       $("body").click(function(e){
           if(e.target.id != "div_fieldWorkers")
           {
               $("#div_fieldWorkers").hide();
               $("body").unbind("click");
           }
       });
   });

});

Reference: 

http://stackoverflow.com/questions/19092433/close-popup-div-when-clicked-outside 

Submitting data in JSON format to the website

If your web page contains quite a number of fields to be posted to the web server, you may submit the data in JSON format (through JQuery). In this way, you may get rid of writing lots of query parameter in the URL.

Below is the sample code posted by someone.

Sample code
http://stackoverflow.com/questions/5570747/jquery-posting-json

JSON Object
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify

Javascript parameter is optional

In Javascript, the parameter in the function is optional. If the caller did not pass in the parameter value (as shown in test1 function), then, the value of "a" is "undefined". So, each time before you are using the incoming parameter value, make sure that you check it before using it.


You may copy the following tags into any html file and then debug it in Visual Studio.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function check(a) {
            var i = 0;
            if (a) {
                i = a;
            }
            else {
                i = -1;
            }
        }
        function test1() {
            check();
        }
        function test2() {
            check(12345);
        }
        function test3() {
            check(null);
        }
    </script>
</head>
<body>
    <input type="button" name="name" value="test1" onclick="return test1();" />
    <input type="button" name="name" value="test2" onclick="return test2();" />
    <input type="button" name="name" value="test3" onclick="return test3();" />
</body>
</html>

Clearing the contents in an element

Execute the following using JQuery, it will clear all the contents (including tags) within "div1":

   $('#div1').remove().end();

Get the input by ID

Let's say you have 3 buttons which starts with "f1" and below is the HTML tags:

        <input type="button" id="f1.1" value="test1" />
        <input type="button" id="f1.2" value="test2" />
        <input type="button" id="f1.3" value="test3" />

When you run the following JQuery code, you will get different result:

            var v1 = $('#f1.1');              => this returns zero match.
            var v2 = $('input[id^="f1"]');  => this returns 3 matches.
            var v3 = $('input[id="f1.2"]'); => this returns 1 match (i.e., the second button).

If you are using "#" in the selector, the result is either 0 or 1 (it's always stop after it found the first one).

For more details, check out the following reference:

    http://api.jquery.com/category/selectors/

Detecting double click in an element

I'm working on an attendance audit screen which allows the user to single click to confirm the selection and double click to create a report. After I googled for the solution, I found the following solution in stackoverflow.com

Below is the code:

// Someone has created the solution as a delegate to ease the implementation.
 $.singleDoubleClick = function (singleClk, doubleClk) {
            return (function () {
                var alreadyclicked = false;
                var alreadyclickedTimeout;

                return function (e) {
                    if (alreadyclicked) {
                        // double
                        alreadyclicked = false;
                        alreadyclickedTimeout && clearTimeout(alreadyclickedTimeout);
                        doubleClk && doubleClk(e);
                    } else {
                        // single
                        alreadyclicked = true;
                        alreadyclickedTimeout = setTimeout(function () {
                            alreadyclicked = false;
                            singleClk && singleClk(e);
                        }, 300);
                    }
                }
            })();
        }

// call this in the document ready:
$('.profile').bind('click', $.singleDoubleClick(confirmSelection, createReport));

JQuery offset returns null value

This could be due to the "$(this)" call. Instead, calling "$('#your_control_id')" will resolve the problem.