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

Sorting JSON Array – ASP.Net MVC Cascaded DropDownList 2 – 在ASP.Net MVC 中實現級聯下拉框 2 – ASP.net MVC Sorting JSON result

在上一個Post 介紹了怎樣在ASP.Net MVC 上使用Cascaded DropDownList

ASP.Net MVC Cascaded DropDownList – 在ASP.Net MVC 中實現級聯下拉框

和另一個Post 介紹怎麼在 Razor cshtml/vbhtml 上幫 Drop Down List 進行排序

ASP.Net Web Application To ASP.Net MVC Notes II Drop Down List Sorting DropDownList- ASP.Net Web Application To ASP.Net MVC 新手筆記II Drop Down List 排序 

但是還是有一個美中不足的地方…
就是 如果我們的資料不是順序排列的話…
那個DropDownList 便會有點難看了
Unsorted Cascading Drop Down List
由於之前的 ASP.NET MVC 上 的Cascaded DropDownList是用 Ajax Call 來取得JSON Array 之後再進行DataBind鎖定到 DropDownList 上..
所以我們便不可以 用ASP.Net 的功能來把資料進行Sorting/排序了

經過了一段時間在網上進行Research 後.. 終於找到了一個 自定的 Javascript function 來把 JSON Array 排序
以下是這個 Function 的Code

在頁面上加入了 這個Function 後
我們便可以用 這個function 來解決sorting 的問題了

&lt;script type="text/javascript"&gt;
 //一個Javascript的功能用來做ordering 的
    //Field是屬性的名稱
    //Desc 是定義是否用倒序方法 true,false
    function OrderBy(Field, Desc, Primer) {
    //如果Desc = true 的話 用 -1 otherwise用 1
        if (Desc) {
            Desc = -1
        }
        else {
            Desc = 1
        }
        //下面做comparison
        return function (a, b) {
            a = a[Field];
            b = b[Field];
            if (typeof (Primer) != 'undefined') {
                a = Primer(a);
                b = Primer(b);
            }

            if (a &lt; b) return Desc * -1;
            if (a &gt; b) return Desc * 1;
            return 0;
        }
    }
&lt;/script&gt;

 將會被更給的Javascript

$.each(FoodInfo, function (index, FoodInfo) {
//在這裡把Json Array的相關內容加進我們的Dropdownlist上 //這個是給ddl_Food的
                        ddl_Food.append(
                        $('&lt;option/&gt;')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_ID));
/這個是給ddl_FoodName的
                        ddl_FoodName.append(
                        $('&lt;option/&gt;')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_Name))
                    });

 已更變的Javascript

//要更變的地方
                    //因為現在2個DropDownList databind的內容的次序不同了
                    //所以要分開來re-populate2個dropdownlist
                    //正常的
                    $.each(FoodInfo, function (index, FoodInfo) {
                        ddl_Food.append(
                        $('&lt;option/&gt;')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_ID));
                    });
                    //把第一個Json Array的Value Assign到一個暫用的Variable上.. 以令被選中的DropDownList Value一致
                    TempFood = FoodInfo[0].Food_ID;
                    //現在我們要使用Sorting來把
                    FoodInfo = FoodInfo.sort(OrderBy('Food_Name', false, function (a) { return a.toUpperCase() }));
                    $.each(FoodInfo, function (index, FoodInfo) {
                        ddl_FoodName.append(
                        $('&lt;option/&gt;')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_Name));
                    });
                    //如果TempFood 不是空白時 我們把他的Selected Value完成ddl_Food 現在SelectedValue
                    if (TempFood != "") {
                        $("ddl_FoodName").val(TempFood);
                    }

Cascading DropDownList 所用的 Javascript在這裡

&lt;script type="text/javascript"&gt;

    $(document).ready(function () {
//在這裡我們做一些 和 SelectedIndexChanged 的 功能
        //Set up Selected Index Change Like Event For ddl_FoodCategories and #ddl_FoodCategoriesName
        DDL_SelectedIndexChanged('#ddl_FoodCategories', '#ddl_FoodCategoriesName');
        DDL_SelectedIndexChanged('#ddl_FoodCategoriesName', '#ddl_FoodCategories');
        //Set up Selected Index Change Like Event For ddl_Food and #ddl_FoodName
        DDL_SelectedIndexChanged('#ddl_Food', '#ddl_FoodName');
        DDL_SelectedIndexChanged('#ddl_FoodName', '#ddl_Food');
    });

    function DDL_SelectedIndexChanged(DDL1, DDL2) {
//當感到有 .Change event的時候 進行以下的function
        $(DDL1).change(function () {
//把DDL1 的value assign到DDL2上
            $(DDL2).val(this.value);
//如果DDL1是 ddl_FoodCategories或ddl_FoodCategoriesName 時我們要進行一個Jquery 的AJAX Call
//因為 我們暫時不用為用戶改變ddl_Food或ddl_FoodName 時進行任何特別的動作的.. 所以 便用了 "#ddl_FoodCategories" || DDL1 == "#ddl_FoodCategoriesName"
            if (DDL1 == "#ddl_FoodCategories" || DDL1 == "#ddl_FoodCategoriesName") {
//我們用了RAZOR 的syntax 來建立我們的連結
//用了Jquery的 getJSON方法 向CascadingDropDownList Controller 的 SelectedFoodCategory 取資料
//我們的Parameter是 Food_Category_ID 用來取出和這個Food Category 有關的Food 的資料
                $.getJSON('@Url.Action("SelectedFoodCategory", "CascadingDropDownList")', { Food_Category_ID: this.value }, function (FoodInfo) {
//取得資料後 我們便可以把資料assign 到我們現有的 ddl_Food 和ddl_FoodName上了
                    var ddl_Food = $("#ddl_Food");
                    var ddl_FoodName = $("#ddl_FoodName");
//首先我們要清楚將會被更新的Dropdownlist 的內容 -- 可以使用object.empty() 來實現的
                    ddl_Food.empty();
                    ddl_FoodName.empty();
//要更變的地方
                    //因為現在2個DropDownList databind的內容的次序不同了
                    //所以要分開來re-populate2個dropdownlist
                    //正常的
                    $.each(FoodInfo, function (index, FoodInfo) {
                        ddl_Food.append(
                        $('&lt;option/&gt;')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_ID));
                    });
                    //把第一個Json Array的Value Assign到一個暫用的Variable上.. 以令被選中的DropDownList Value一致
                    TempFood = FoodInfo[0].Food_ID;
                    //現在我們要使用Sorting來把
                    FoodInfo = FoodInfo.sort(OrderBy('Food_Name', false, function (a) { return a.toUpperCase() }));
                    $.each(FoodInfo, function (index, FoodInfo) {
                        ddl_FoodName.append(
                        $('&lt;option/&gt;')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_Name));
                    });
                    //如果TempFood 不是空白時 我們把他的Selected Value完成ddl_Food 現在SelectedValue
                    if (TempFood != "") {
                        $("ddl_FoodName").val(TempFood);
                    }
                });

            }
        });

Cascading Drop Down List Sorted

Hope you find it useful