Category Archives: Jquery Notes

TypeError: $(…).checkValidity is not a function

很多時候我們都會使用到一些custom 的Validation
但是我們亦都希望使用HTML5Form Validation 來做第一線的
當我嘗試使用 checkValidity() 功能時
Google Chrome Console出現了以下的錯誤信息
TypeError: $(…).checkValidity is not a function
做了一會research 之後終於找到解決方法了

if ($("#frmConfirm").checkValidity()) {
  console.log("Valid");
}

解決方法:
$(“#frmConfirm”)[0].checkValidity()

if ($("#frmConfirm")[0].checkValidity()) {
  console.log("Valid");
}

Hope you find it useful

TypeError: Object [object Object] has no method ‘live’

今天公司的網頁其中某些功能出現了問題
用戶Click 了之後沒有反應…
Google Chrome Developer Tools Console 上找到以下的錯誤信息
TypeError: Object [object Object] has no method ‘live’

做了research之後發現…
原來是同事更新了 網頁上的JQuery 版本.. 從
JQuery 1.7.2 更新到 JQuery 1.10.2
在JQuery 1.9的時候 已經不再支援 .live() 這個功能了

解決方法..
解決方法 一:
這個方法比較簡單..
只是我做在頁面上加入
以下的JQuery Migrate Javascript 檔案便可以了
http://code.jquery.com/jquery-migrate-1.2.1.js

或到以下網址下載更新的 file

http://jquery.com/download/

解決方法:
更好的方法是看看自己的程式碼..
把 “.live()” 這個已經 deprecate 的 method
轉成 “.on()” 便可以了

Hope you find it useful

JQuery Button Click Event / JQuery 上的 Button Click Event

使用JQuery 其中一個十分常用的功能相信是 button click這個動作…
使用方法十分簡單

我們要預先在Document.ReadyEvent上先定義一下 將來會做的動作
E.G Button Click
//定義 這個Button Click Event
我們多數會使用 ID 來選擇我們要控制那一個Control的
在Jquery上 要選擇一個Control我們可以使用
$(“#ID名稱”) 便可以了
Javascript

<script type="text/javascript">
    $(document).ready(function () {

      //以下定義了當 按鈕 "btn_Run", 有人Click的時候便彈出一個Hello ShareChiWai的MessageE.G.
      $("#btn_Run").click(function(){
        alert("Hello! ShareChiWai.");
      });

    });
    </script>
    

HTML

    <input type="button" id="btn_Run" value="Run"/>
    

十分簡單

//click() 這一個功能不是只限於Button的.. 其他是很多東西也可以使用的
E.G. Div
HTML

    <div id="div_ClickSample">
    Click Sample
    </div>
     

Javascript

     <script type="text/javascript">
    $(document).ready(function () {

      $("#div_ClickSample").click(function(){
        alert("Hello! You Just Clicked on a Div");
      });

    });
    </script>
    

Hope you find it useful

Download jquery-1.7.2-vsdoc.js – 那

今天開始ASP.Net MVC3的Project
是把一個Classic ASP的Website轉使ASP.Net MVC3 的網頁..
開始先做的動作..
當然是把最新的JQuery Library 加進Project上..
和在Page 的Reference上使用最新的JQuery
大家可以到JQuery的官方網站上Download最新的JQuery
http://docs.jquery.com/Downloading_jQuery

到了網站後發現網站上很像沒有 jquery-1.7.2-vsdoc.js
vsdoc.js這個檔案主要是用在Visual Studio上..
令到Visual Studio可以提供 JQuery 相關的 intellisense

最後在網上research了一會兒 終於找到解決方法了

解決方法:
我們可以到以下網址下載jquery-1.7.2-vsdoc.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2-vsdoc.js

如果是其他版本的話..只要更改URL上的版本version no 便可以了

E.G. jquery-1.6.1.jsvsdoc
可以使用以下的URL.
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1-vsdoc.js

Hope you find it useful

My JQuery Cheat Sheet 1

今天去了一個Hack Day
發現..原來自己很小記下 自己寫過的程式碼..
除了一些日常用的 程式碼外..
多數都是複製之前做過的..之後加以修改便可以解決問題…
[我真的不是一個好的Programmer…]
所以今天決定好好為自己寫下一些有關JQuery或Javascript的 Cheatsheet..
把所有暫時覺得十分有用..實用的 JQuery程式碼/功能都 放在這一個網誌上..
方便將來找功能時使用 =P..

以下是我的小小Cheatsheet

我們可以用以下的Code 去連接我們的JQuery Library
如果可以的話..最好是使用CDN (Content Delivery Network)上的copy
因為這樣子可以縮短延遲時間…因為CDN 把一些靜態的檔案散佈在不同地區的Server上…所以用戶Browser 能夠自動的選擇最近的檔案Download, 縮短延遲時間
另一個原因是可以減輕你的Server上的負荷 – 因為可以分流了到CDN, 和些多Browser都會有一些限制..不允許在同一時間向同一個website/hostname 開啟很多的連接. 當你使用了CDN 的話…其中一個檔案的連接便會是向這個CDN 的網址 request/請求的
令這個Browser可以繼續request你網頁上其他的資源/檔案

CDN 亦都以提供更好的緩存..如果其他website也有用同一個CDN的話..當用戶的Browser看到 之前已經有其他Request到CDN上同一個檔案時..Browser會自動Caches了這一個檔案[應該是最多一年的時間]…待將來有同一個檔案的Request時 Browser 也不需要再次download這個檔案
這可以減低Brandwidth 和增加page load的速度

<html>
<head>
<title> ShareChiWai </title>

 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
        if (typeof jQuery == 'undefined')
        {

            alert(unescape("%3Cscript src='/js/jquery-1.7.2.min.js' type='text/javascript'%3E%3C/script%3E"));

        }
</script>

</head>

<body>

</body>
</html>

下一次將會介紹一些 簡單又實用的功能

Hope you find it useful

Jquery’s Notes

I am learning JQuery at the moment, and going to note down the error/mistake which I made while I am experimenting it.
Hope you would find it useful if you encounter the same issue, while you are using JQuery. Please correct me if my concept is

wrong or you have a better solution.

Why learn JQuery?
It is a JavaScript library/API/Frameworks allow you to develop website rapidly with nice feature that can work Cross-

browser, CSS3 Compliant and Lightweight Footprint, you can found lots of plugin on-line which can save you a lot of time to

develop you own method for some common feature.

Here it is the official site for JQuery, where you can find JQuery to download download/tutorials/documentation and get the latest

information about it.
jquery.com

One thing that I would like to remind myself from this notes is. All the even/action E.g. Blur, Onchange…etc should register on ready event. Of course, the most important thing is to reference the jquery.js between the HTML header tag.
E.g.

<br /><span style="color:rgb(0,153,0);"></span><br /><span style="color:rgb(0,153,0);">   </span><br /><span style="color:rgb(0,153,0);">          </span><br /><span style="color:rgb(0,153,0);">     </span><br /><span style="color:rgb(0,153,0);">           //Register on ready event                                        </span><br /><span style="color:rgb(0,153,0);">             $(document).ready(function() {</span><br /><span style="color:rgb(0,153,0);">              $("#txt_Text").change(function(){</span><br /><span style="color:rgb(0,153,0);">                 alert($("#txt_Text").val());</span><br /><span style="color:rgb(0,153,0);">               });</span><br /><span style="color:rgb(0,153,0);">          });</span><br /><br /><span style="color:rgb(0,153,0);">                  </span><br /><span style="color:rgb(0,153,0);">       <title>Jquery Notes</title></span><br /><span style="color:rgb(0,153,0);">    </span><br /><span style="color:rgb(0,153,0);">  </span><br /><span style="color:rgb(0,153,0);">     </span><br /><span style="color:rgb(0,153,0);">  </span><br /><span style="color:rgb(0,153,0);"></span><br /><br />

The example above will display an alert box when we change the focus on txt_Text input control.

Happy coding.