Javascript that prevents double click on submit button

This is what happening:

• The user loves "double clicking" on any button even though single click will trigger the action.
• The Internet connection slows down and the user thought that he did not click on the correct button. So, he decided to click it again even though the waiting time is lesser than 1 second (?!).

To solve this, you need the following JavaScript to ensure that the submit is working with single click only. Note: you may adjust the value of "500" (ms) to whatever value that you want.

var _prev_save_click_ts = null;

function beforeSubmit() {

    if (_prev_save_click_ts != null) {
        var ts = new Date();

        if (ts - _prev_save_click_ts < 500) {
            // user is double clicking.
            return false;
        }
    }

    _prev_save_click_ts = new Date();
    return true;
}

Printing HTML with JavaScript

You want to allow the user from printing current page directly to the printer and here is the recipe:


1. A print button that calls your print function (written in JavaScript).

2. In your print function, you need to do the following thing:

2.1. Inject a hidden iFrame.

2.2. Set the "src" to the page that you have to print. If you are developing a POS (Point of Sales), you may specify the URL of the receipt page to the "src" together with the  receipt number in the query string. For example,

<iframe id="receipt-frame" style="display:none;" src="myReceipt.aspx?refno=123456"/>

Note: the page that you call should return the contents to be printed out. You have two choices to merge the data into the receipt format: (1) do everything at the server side (2) execute client side JavaScript upon page loaded.

2.3. Once you have the content to be printed, you need to call the following function (upon page loaded). This function will send the content to the printer.

  window.onafterprint = function() {
      window.parent.myPrintJobCompleted();
  }

  window.print();

In case you want to inform the parent page that the user has printed the content, you must handle the window.onafterprint event. In the example above, it executes the function myPrintJobCompleted (this function will load with the main page).

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?