Tag Archives: Jquery

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

Document.Ready in AngularJs

相信很多朋友都有使用JQuery來 寫網頁…
大家對document.ready都不會陌生…

當大家轉了使用AngularJs的時候都可能會有一個 疑問…
如何在 AngularJS 上使用 document.ready?

解決方法十分簡單

我們可以使用angular.element(document).ready() 來實現 document.ready 待 html成功load完之後執行 document.ready入的程式碼

angular.element(document).ready(function () {
        console.log('Hello World');
    });

E.G.

angular.module("shareChiWaiApp", [])
    .controller("shareChiWaiCtrl", ["$scope", function ($scope) {

        function shareChiWaiViewModel() {
            var self = this;
            self.firstName = "ChiWai";
            self.surname = "Share";
        }

        
        
        angular.element(document).ready(function () {
        $scope.sharechiwai = new shareChiWaiViewModel();
          $scope.sharechiwai.firstName="before";
        console.log($scope.sharechiwai.firstName);
        });
    }]);

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 get number of items inside select list/ dropdownlist – 使用JQuery來取得在SelectList/ DropDownList上有多小個Item.

今天公司的ASP.Net MVC Website其中有一個Form 有很多Dynamic的 資料要取出
我們要依照不同的選擇顯示不同的內容..
其中一個情況是

當使用者選擇了一些內容後
另外的2個DropDownList會更新內容…
有時候因為資料沒有相符的關係..
不能Populate 其他的DropDownList
在這個情況下我們便要出示其他的資訊去提示用戶了

所以我們有需要看看怎樣取得DropDownList內有多小個Item

原本使用ASP.Net的話我們可以使用
C#

int NumberOfItems = ddl.Items.Count;

但是在ASP.Net MVC上我們便需要使用JQuery來實現了
假設我們的DropDownList 是這樣的
HTML

<select id="MinimumContractTerm" name="MinimumContractTerm" class="valid"><option value="1">1 month</option>
<option value="3">3 months</option>
<option value="6">6 months</option>
<option value="12">12 months - 1 Year</option>
<option value="24">24 months - 2 Year</option>
<option value="36">36 months - 3 Year</option>
<option value="48">48 months - 4 Year</option>
<option value="60">60 months - 5 Year</option>
</select>
<button id="btn_run" name="btn_run">Run</button>

我們可以使用以下的JQuery 方法來解決這個問題
Javascript

 $(document).ready(function () {
      $("#btn_run").click(function(){
          alert($("#MinimumContractTerm").length);
     });
});

Hope you find it useful

JQuery Non-Ajax Post

最近我的ASP.Net MVC Project 又遇到難題了

有時候因為希望可以建立一些功能給客戶選擇…
選擇後可以按一下相對的按鈕來 Download file
之前用ASP.Net時可以通過 Code-Behind來實現的

由於是要看看選擇了什麼才決定download 什麼東西
我的想法是用Jquey 來把已選擇的條件用Ajax Post到 Controller上
我的Controller是這樣的.. 為了方便做試驗我 Hard code Download File的位置

[HttpPost]
        public ActionResult DownloadFile(string Filename)
        {
            return File(@"D:\UserProfile\Desktop\Img\MySQLMD5Function.png", "png/application", Filename);
        }

我的cshtml是

&lt;h2&gt;Non Ajax Post&lt;/h2&gt;
&lt;input type="button" value="NonAjaxPost" id="btn_NonAjaxPost" /&gt;

之後便可以在這個Controller上 輸出這個檔案

  $("#btn_NonAjaxPost").click(function () {
 $.post('@Url.Action("DownloadFile", "NonAjaxPost")', { Filename:"example.png" }, function () {
            });
        });

之後發現.. 好像不能用 Ajax.PostAjax.GetDownload File
E.G. 不可以用Jquery 的Ajax Post或Get 的動作 連到一個 Download FileActionDownload檔案.. [可能是因為Response 的Header 不能正確地 編譯 的關係]

最後終於想到了解決方法..
就是要寫一個功能來令到到JQuery做一個 正常的Post/Get
我們可以Extend JQuery的 Library

<script type="text/javascript">
$(document).ready(function () {
(function($) {
    $.extend({
//要做到Non-Ajax Get的話
//我們可以使用
//document.location = “我們想用get 去瀏覽到的URL 上” 之後再加進 要用的Parameter進去
//其間我們使用這個功能時要放進2個Parameter 一個是 目的地的URL
//另一個是 我們希望Post的 Parameter
        NonAjaxGet: function(url, params) {
            document.location = url + '?' + $.param(params);
        },
//要做到Non-Ajax Post的話
//我們可以使用JQuery/Javascript 來寫一個 暫用的Form來進行 之後用form.submit() 這個功能把Form Post進我們又Non-Ajax Post的頁面上
//其間我們要放進2個Parameter 一個是 目的地的URL
//另一個是 我們希望Post的 Parameter
        NonAjaxPost: function(url, params) {
            var $form = $("<form method='POST'>").attr("action", url);
            $.each(params, function(name, value) {
                $("<input type='hidden'>")
                    .attr("name", name)
                    .attr("value", value)
                    .appendTo($form);
            });
            $form.appendTo("body");
            $form.submit();
        }
    });
})(jQuery);
});

使用方法:
假設我們都是使用JQuery

//            $.NonAjaxPost('要POST 到的URL', {
//                變數: "變數值",變數2: "變數值2"
//            });

  $("#btn_NonAjaxPost").click(function () {
            $.NonAjaxPost('@Url.Action("DownloadFile", "NonAjaxPost")', {
                Filename: "example.png"
            });
        });

這樣我便可以成功在ASP.Net MVC 使用JQuery來Download File了

Hope you find it useful