Javascript lambda: No binding of this

<form>
    <p>
        <button id="f1">Invoke with function</button>
    </p>
    <p>
        <button id="f2">Invoke with lambda</button
    </p>
    <div id="output"></div>
</form>
<script>
    'use strict';
    (function () {
        let f1 = document.querySelector('#f1'),
            f2 = document.querySelector('#f2'),
            output = document.querySelector('#output');

        function appendResult(message) {
            let log = document.createElement('pre');
            log.appendChild(document.createTextNode(message));
            output.appendChild(log);
        }

        // define with function, reference 'this' to button element
        f1.onclick = function () {
            appendResult('Button [Invoke with function] clicked!');
            appendResult('This is: ' + JSON.stringify(this) + ' [' + this.constructor.name + ']');
            console.log(this);
            return false;
        };

        // define with lambda, reference 'this' to {name: 'Bruce'} object
        f2.onclick = () => {
            appendResult('Button [Invoke with lambda] clicked!');
            appendResult('This is: ' + JSON.stringify(this) + ' [' + this.constructor.name + ']');
            console.log(this);
            return false;
        };

    }).call({name: 'Bruce'})
</script>

Result:

Reference: No binding of this

Memo: Debounce Task

To prevent multi-execution from caller in short time, use debounce for single execution.

var debounce = function (func, threshold, execAsap) {
    var timeout;
    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
            func.apply(obj, args);
            timeout = null;
        };
        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);
        timeout = setTimeout(delayed, threshold || 100);
    };
}

Regular expression: replace with group value

Javascript

$str = $str.replace(/(\s*)(\S)(.+)/g, '$1' + $prefix + ' $2$3');

Notepad++

Quickly parse domain name from url

(function (href) {
    var $a = document.createElement('a');
    $a.href = href;
    return $a;
})('http://nanashi07.blogspot.tw/2013/03/quickly-parse-domain-name-from-url.html').hostname

JSRequest, Get parameters from querystring with javascript in SharePoint

Provides method to parse query string, filename, and pathname from URL

// Initialize first
JSRequest.EnsureSetup();

// Get the current file name
JSRequest.FileName: "qa.aspx"
// Get the current path name
JSRequest.PathName: "/sites/BruceDev/SitePages/qa.aspx"
// Get request query string parameter
JSRequest.QueryString["dy"];

JSRequest

JSRequest = {
    QueryString: null,
    FileName: null,
    PathName: null,
    EnsureSetup: function () {
        if(JSRequest.QueryString != null) return;
        JSRequest.QueryString = new Array();
        var queryString = window.location.search.substring(1);
        var pairs = queryString.split("&");
        for(var i = 0; i < pairs.length; i++) {
            var p = pairs[i].indexOf("=");
            if(p > -1) {
                var key = pairs[i].substring(0, p);
                var value = pairs[i].substring(p + 1);
                JSRequest.QueryString[key] = value;
            }
        }
        var path = JSRequest.PathName = window.location.pathname;
        var p = path.lastIndexOf("/");
        if(p > -1) {
            JSRequest.FileName = path.substring(p + 1);
        } else {
            JSRequest.PageName = path;
        }
    }
};

Fix for SharePoint 2010 scrolling problems for Chrome

Execute on page loaded

function bodyOnLoadWrapperForChrome() {
    //verify we have finished loading init.js
    if (typeof (_spBodyOnLoadWrapper) != 'undefined') {
        //verify we have not already initialized the onload wrapper
        if (typeof (_spBodyOnloadCalled) == 'undefined' || !_spBodyOnloadCalled) {
            //initialize onload functions
            _spBodyOnLoadWrapper();
        }
    }
    else {
        //wait for 10ms and try again if init.js has not been loaded
        setTimeout(bodyOnLoadWrapperForChrome, 100);
    }
}

String.replaceAll()

String.prototype.replaceAll = function(oldValue, newValue) {
    return this.split(oldValue).join(newValue);
}

script path in master page

use script manager (script will appear in body section)

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/jquery.js" />
    </Scripts>
</asp:ScriptManager>

use ResolveClientUrl method

<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/jquery.js") %>"></script>

asp.net form validate

// 確認更新
function confirmUpdate(
    confirmMessage, /* 確認訊息 */
    validateGroup, /* validate group*/
    fn /* 自訂欄位檢查function */
) {
    if ('undefined' != typeof (tinyMCE)) tinyMCE.triggerSave(); // 觸發tinyMCE儲存值
    if ('undefined' != typeof (validateGroup)) validateGroup = null;
    if ('function' != typeof (fn)) fn = function () { return true; }  // 自訂驗證的function, 若無則回傳true
    if ('function' != typeof (Page_ClientValidate)) var Page_ClientValidate = function (group) { return true; } // validate control驗證
    if ($(document.forms[0]).valid2() && Page_ClientValidate(validateGroup)) {
        return fn() && confirm(confirmMessage);
    } else {
        return false;
    }
}

Retire value from tinyMCE when jQuery validate valid() invoked

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="superspace.usercontrols.WebForm2" ValidateRequest="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>tinyMCE + jQuery validate</title>
    <!-- jQuery -->
    <script src="<%=VirtualPathUtility.ToAbsolute("~/")%>js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <!-- jQuery validate + metadata -->
    <script src="<%=VirtualPathUtility.ToAbsolute("~/")%>js/jquery.validate/jquery.metadata.min.js" type="text/javascript"></script>
    <script src="<%=VirtualPathUtility.ToAbsolute("~/")%>js/jquery.validate/jquery.validate.min.js" type="text/javascript"></script>
    <script src="<%=VirtualPathUtility.ToAbsolute("~/")%>js/jquery.validate/jquery.validate.ext.min.js" type="text/javascript"></script>
    <!-- tinyMCE Editor -->
    <script src="<%=VirtualPathUtility.ToAbsolute("~/")%>js/tiny_mce/tiny_mce.js" type="text/javascript"></script>
    <script src="<%=VirtualPathUtility.ToAbsolute("~/")%>js/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            font-size: smaller;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('.txtContent').tinymce({
                theme: "advanced",
                language: "zh",
                theme_advanced_toolbar_location: "top",
                theme_advanced_toolbar_align: "left",
                theme_advanced_statusbar_location: "bottom",
                theme_advanced_resizing: true
            });
            $(document.forms).validate();
        });
        function confirmUpdate() {
            if (typeof (tinyMCE) != 'undefined') tinyMCE.triggerSave();
            if (!$(document.forms).valid()) return false;
            return true;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h3>
        Force tinyMCE editor to save content to control, avoid validate error when valid() has been invoked;</h3>
    <table border="0">
        <tr>
            <td>
                <b style="color: Red;">*</b>標題
            </td>
            <td>
                <asp:TextBox ID="txtTitle" runat="server" CssClass="{required:true,messages:{required:'請填寫標題!'}}" />
            </td>
        </tr>
        <tr>
            <td valign="top">
                <b style="color: Red;">*</b>內容
            </td>
            <td>
                <asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine" Width="100%" Rows="15" CssClass="txtContent {required:true,messages:{required:'請填寫內容!'}}" />
            </td>
        </tr>
        <tr>
            <td align="center" colspan="2">
                <asp:Button ID="btnSubmit" runat="server" Text="儲存" OnClientClick="return confirmUpdate();" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

jQuery validator: focus invalid field when calling valid()

/*
 * 在validate呼叫valid()驗證方法式, 加上focusInValid的動件
 */
(function($) {
    $.extend($.fn, {
        valid2 : function() {
            var valid = true;
            var validator;
            if ($(this[0]).is('form')) {
                validator = this.validate();
                valid = this.validate().form();
            } else {
                validator = $(this[0].form).validate();
                this.each(function() {
                    valid &= validator.element(this);
                });
            }
            if (!valid)
                validator.focusInvalid();
            return valid;
        }
    });

    // 新增一個 regex 的驗證方式
    $.validator.methods.regex = function(value, element, param) {
        return this.optional(element) || ((typeof(param) == 'function' && typeof(param.test) == 'function') ? param.test(value) : new RegExp(param).test(value));
    };
    $.validator.messages.regex = 'Please enter a valid value.';
})(jQuery);

Close window without confirm (I.E only)

window.opener=null; 
window.open('','_self'); 
window.close();

Tick

Start tick

	Java	Javascript	.net
Tick = 0 (GMT+0)	1970/01/01 00:00:00	1970/01/01 00:00:00	1601/01/01 00:00:00
sec/tick	1000	1000	10000000

Convertion

tick=0\to tick	Java	Javascript	.net
Java	x	0	621356256000000000
Javascript	0	x	621356256000000000
.net	-11644473600000	-11644473600000	x

// Convert c# date to javascript
var ticks = (DateTime.Now.Ticks - 621356256000000000) / 10000;

// Convert javascript date to c#
var ticks = (((new Date()).getTime() * 10000) + 621355968000000000);

jQuery : post/get using data() as param object

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Recursive call when post request</title>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
    $(function() {
        var count = 0;
        $('input:button').click(function() {
            // identity
            count++;
            var tick = count;
            // post url
            var url = '${contextPath}/';
            // post param
            var param = $(this).data();
            console.log(param);
            $('<div>(' + tick + ') Post to : ' + url + '</div>').appendTo(document.body);
            $.post(url, param, function(data) {
                $('<div style="color:blue;">(' + tick + ') Ajax works successfully.</div>').appendTo(document.body);
            });
        });
    });
</script>
</head>
<body>
<input type="button" value="click to post" data-action="test" data-name="bruce" data-age="31" />
</body>
</html>

ボタンをクリックすると、data()のオブジェクトがハンドルを値を持っているため、postするときにハンドルは再び執行することになる。つまり、クリック事件は繰り返しする。この現象を避けるには、ハンドル/イベントを削除しなければならない。

jQuery validte : regex rule

$.validator.addMethod(
    "regex",
    function(value, element, regexp) {
        var check = false;
        var re = new RegExp(regexp);
        return this.optional(element) || re.test(value);
    },
    "Please check your input."
);

$("textbox").rules("add", { regex: "^[a-zA-Z'.\s]{1,40}$" })

jQuery serialize form to json

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

jQuery metadata

$(document).ready(function(){
    var data = $("#message").metadata();
    var i; 
    for(i in data){
        $("#message").append("<div>"+i+"="+data[i]+"</div>");
    }
});

<div id="message" class="mess {firstName:'Bruce',lastName:'Tsai'}"></div>

jQuery validate

利用 css (class屬性), 只能處理預設驗證規則(required, email....)

*Account :

*e-mail :

利用 rules 加入驗證規則與自訂錯誤訊息

Cell Phone :

驗證成功與失敗時的處置

Age1 :

Age2 :

新增移除規則

Test email1:

Test email2:

搭配 Matadata 在 class 屬性中設定驗證規則

Number1 :

自訂驗證規則

Number2 :

Social ID :

驗證規則依存性

勾選為必填

address :

(function(){
    $("#form01").validate({
        debug: true  // 除錯模式
    });
    
    $("#form02").validate({
        rules: {
            cellphone: {  // form.name
                required: true,
                digits: true,
                minlength: 5
            }
        },
        messages: {
            cellphone: {  // form.name
                required: "請填寫電話!",
                digits: "請填寫電話號碼!",
                minlength: $.format("至少填入 {0} 個數值")  // 對應驗證的參數
            }
        },
        debug: true
    });
    
    $("#form03").validate({
        submitHandler: function(form){
            alert("Age1 value : " + $("#age1").val());
            form.submit();
            //$(form).ajaxSubmit();
        },
        invalidHandler: function(form, validator){
            var errors = validator.numberOfInvalids();
            alert($.format("錯誤數 : {0}", errors));
        }
    });
    
    $("#form04").validate();
    $("#testemail1").rules("add", {required:true});
    
    $("#form05").validate();
    
    // 新增驗證規則, 作法一
    $.validator.methods.lessThanSquare = function(value, element, param){
        // @value 輸入的值
        // @element 驗證的目標元件
        // @param 設定規則時的參數
        return value * value < param;
    };
    // 新增驗證規則, 作法二
    $.validator.addMethod("testSocialId", function(value, element, param){
        return /\w\d{9}/.test(value);
    }, "身份證號驗證錯誤");
    $("#form06").validate({
        rules: {
            number2: {
                required: true,
                digits: true,
                lessThanSquare: 100
            },
            socialid: {
                required: true,
                testSocialId: true
            }
        },
        messages: {
            number2: {
                lessThanSquare: "數值錯誤"
            }
        }
    });
    
    $("#form07").validate({
        rules: {
            address: {
                required: "#requiredaddresscheck:checked"
            }
        }
    });
})();

CKEditor compact implement guid

implement way 1 : use css

<textarea id="editor" class="ckeditor"></textarea>

implement way 2 : use javascript

<textarea id="editor"></textarea>
<script type="text/javascript">
// default
CKEDITOR.replace("editor");
// with settings
CKEDITOR.replace("editor", {skin:"office2003", toolbar:"Basic"});
</script>

implement way 3 : use jQuery

<textarea id="editor"></textarea>
<script type="text/javascript">
// default
$("#editor").ckeditor();
// with settings
$("#editor").ckeditor(
    function(){
        // callback code
    },
    {
        uiColor: "pink",
        skin: "kama",
        toolbar: [
            ["Source", "Preview"],
            "/",  // line break
            ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "Print", "SpellChecker", "Scayt"]
        ]
    }
);
</script>

toolbar properties

"Source"
"Save"	"NewPage"	"Preview"	"Templates"
"Cut"	"Copy"	"Paste"	"PasteText"	"PasteFromWord"	"Print"	"SpellChecker"	"Scayt"
"Undo"	"Redo"	"Find"	"Replace"	"SelectAll"	"RemoveFormat"
"Form"	"Checkbox"	"Radio"	"TextField"	"Textarea"	"Select"	"Button"	"ImageButton"	"HiddenField"
"Bold"	"Italic"	"Underline"	"Strike"	"Subscript"	"Superscript"
"NumberedList"	"BulletedList"	"Outdent"	"Indent"	"Blockquote"
"JustifyLeft"	"JustifyCenter"	"JustifyRight"	"JustifyBlock"
"Link"	"Unlink"	"Anchor"
"Image"	"Flash"	"Table"	"HorizontalRule"	"Smiley"	"SpecialChar"	"PageBreak"
"Styles"	"Format"	"Font"	"FontSize"
"TextColor"	"BGColor"
"Maximize"	"ShowBlocks"	"About"

CKEditor 3 JavaScript API Documentation

jQuery UI, adjust font size

.ui-widget { font-family: Verdana, Arial, sans-serif; font-size: 10pt; }