Browse by Tags

小試 JavaScript Promise

非同步邏輯是寫 JavaScript 逃不掉的複雜課題，古早流行的做法是傳入 Callback 函式當參數，待特定作業完成再呼叫，缺點是串接程序一旦變多，就會出現波動拳式排版，寫到渾然不知身處夢境第幾層： asyncJob1( function () { //Callback 函式： asyncJob1 完成後呼叫 //...... ayncJob2( function () { //Callback 函式： asyncJob2 完成後呼叫 //...... ayncJob3( function...

Posted 22 December 2016 10:34 PM 由 Jeffrey | 1 comment(s) 11,026

Filed under: Javascript, jQuery, TypeScript

在JavaScript模擬C# Dictionary、LINQ Where、Select與OrderBy

一週內被兩位同事問到幾乎相同的問題，這一定是天意！趕緊寫篇FAQ以免天公伯不開心～ 【問題】 用JavaScript要怎麼實現Dictionary<string, T>？ JavaScript有沒有類似LINQ Where()、Select()、OrderBy()的東西？ 回答第一個問題，JavaScript物件本身就具備Dictionary<string, T>的特性，範例如下： <! DOCTYPE html > < html > < head...

Posted 03 July 2016 12:40 PM 由 Jeffrey | with no comments 13,785

Filed under: Javascript, jQuery

小技巧－為text-overflow: ellipsis增加完整文字顯示

CSS 的 text-overflow: ellipsis 刪節號效果 可讓長度不一的文字等寬顯示，遇到版面空間有限又必須整齊排列時很好用，但套用刪節號樣式後看不到完整文字，尤其遇上文字前半截相同時更是難以區別，是一大困擾。為此，我的慣用解法是為套用 ellipsis 的文字元素加上 title Attribute 存入完整文字，將滑鼠移到文字上停留就能看到原始文字，問題迎刃而解。 每次套用 ellipsis 還要額外加 title 有點囉嗦，我寫了一小段  jQuery 讓程序自動化...

Posted 03 February 2016 10:44 PM 由 Jeffrey | 2 comment(s) 6,464

Filed under: CSS, jQuery

介紹jQuery map()與grep()

寫這篇的動機是常在專案看到「古典式」JavaScript陣列處理，例如：跑迴圈將物件陣列的某個字串屬取出轉成字串陣列、篩選物件陣列取得特定類別的集合。用for迴圈處理沒什麼不對，但既然專案已經用了jQuery，能一行搞定卻寫成三五行不免可惜（程式又不按行數計酬，寫愈多手愈酸咩 XD）。感覺上還有些朋友不認識 $.map() 跟 $.grep() 這兩個好東西，故寫篇文章推薦一下。 若用LINQ做比方，＄.map()相當於 .Select(o => 傳回數值或其他型別物件).ToArray(...

Posted 22 June 2015 09:32 PM 由 Jeffrey | 7 comment(s) 27,925

Filed under: jQuery

讓刪除確認通吃confirm及jQuery.Deferred

最近在寫的元件有個「彈出對話框經使用者確認再刪除」的需求，原本是小事一椿，但之前介紹過 使用自訂確認對話框取代window.confirm 的技巧已廣泛應用在專案裡，某些時候也可能只用window.confirm就打發，問題就變複雜了。 二者最大的差異是前者（$.kendoConfirm）為非同步執行，刪除動作需放在jQuery Deferred.promise()的done()方法；window.confirm則為內建同步指令，瀏覽器會等待使用者回應才往下執行，故用 if 判斷 true/false...

Posted 18 June 2015 12:06 AM 由 Jeffrey | 3 comment(s) 10,832

Filed under: jQuery, Kendo UI

自製jQuery waitFor函式：等待條件成立執行作業

在寫JavaScript程式時，常有協調非同步作業的需求，像是作業B必須等待作業A完成後再進行，傳統做法多使用Callback函式，例如： function doJobA(callback) { //do something callback(); } function doJobB() { //do another thing } doJobA(doJobB); 學會jQuery.Deferred後，我幾乎都改用Deferred處理非同步作業，不管串接多個作業循序執行[ 參考 ]或等待多項作業完成再進行...

Posted 28 December 2014 06:55 PM 由 Jeffrey | with no comments 9,820

Filed under: Javascript, jQuery

【答客問】使用jQuery.ajax傳送複雜參數到ASP.NET MVC

讀者小黑提問： 使用jQuery.ajax傳送物件陣列給ASP.NET MVC 一文已示範如何使用jQuery.post()傳遞List<Player>到ASP.NET MVC，但依該做法傳送List<string>卻無法成功，應如何解決？ 熬不住手癢，就來動手實測玩看看吧！改寫前文的MVC Action，加入接收string[] mylist參數，同時結果改為players及mylist一併回傳： ///測試用Action，前端接入List<Player>，轉JSON後傳回...

Posted 10 October 2014 06:31 PM 由 Jeffrey | with no comments 10,132

Filed under: jQuery, ASP.NET MVC

Yet Another Enter To Tab jQuery Plugin

雖然按 Tab 切換輸入焦點已是Windows操作的普遍慣例，但每回在寫作業平台網站時，規格中總少不了"要能直接按 Enter 切換到下一個輸入欄位"的要求。網路上已經有很多在網頁上用 Enter 取代 Tab 移動焦點的 jQuery Plugin，但很可惜沒有一個100%滿足我的需求，所以，這世上又再多了一個用 Enter 取代 Tab 的 jQuery 套件 (Yet Another Enter To Tab) 囉! 它主要提供以下功能: 允許使用者以"Enter"取代"Tab"鍵移動焦點...

Posted 26 April 2014 12:58 PM 由 Jeffrey | 2 comment(s) 11,849

Filed under: jQuery

HTML5上傳作業進度條-SignalR進階版

【前情提要】 利用File API與XHR2 onprogress事件，我們成功做出 檔案上傳進度條 。但我在工作上常遇到另一種情境 -- 內部系統的上傳轉檔作業。營運資料檔案一般不大，加上在Intranet裡傳輸，上傳只在彈指間，Server端解析資料、塞入資料庫才是重頭戲，常得耗上幾十秒到幾分鐘。這種狀況下，用XHR2做進度條的意義不大，咻! 一秒不到就從0%到100%，但上傳資料何時能處理完只有天知道? 使用者終究又陷入無法得知系統還在跑或者已經當掉的焦慮。我想起了"SignalR"...

Posted 10 March 2014 08:53 PM 由 Jeffrey | 3 comment(s) 16,812

Filed under: jQuery, ASP.NET MVC, HTML5, knockoutjs, SignalR

HTML5檔案上傳進度條

在傳統網頁上傳大檔案，得等到全部傳完才會有回應，等待期間沒消沒息，搞不清楚是沒傳完還是當掉常為人詬病，也嚴重破壞使用者體驗。想在傳輸過程回報上傳進度，過去有些Flash、Java Applet或ActiveX的解決方案，但依賴外掛元件有部署及無法跨平台的疑慮。當HTML5規格漸成主流，長久以來的問題總算有了簡潔有效的解法。 要掌握上傳進度有一個關鍵: Client Script必須掌握檔案大小以及已上傳資料量，才可能計算上傳百分比回報狀態。傳統使用<input type="file">選取檔案配合<input...

Posted 09 March 2014 11:51 PM 由 Jeffrey | 9 comment(s) 38,567

Filed under: jQuery, ASP.NET MVC, HTML5, knockoutjs

HTML5練習-從桌面拖拉檔案到網頁

這年頭，網頁如果不支援從桌面或檔案總管直接拖拉檔案，想自稱HTML5都心虛，只能稱作HTML4.5(誤)，老闆客戶還會不時打你臉: "Gmail、OneDrive(SkyDrive)、DropBox幾百年前就有了! 為什麼你到現在還做不出來?" (網頁攻城獅內心的OS: 你有給我Google或Microsoft等級的薪水嗎?) 搞網頁好辛苦，客戶老闆上網胡亂逛，不小心看到酷炫網站，馬上把規格放進專案，還說什麼瀏覽器打開HTML、CSS、JavaScript都能看，快點抄一抄給我做出來...

Posted 08 March 2014 12:13 PM 由 Jeffrey | 6 comment(s) 28,424

Filed under: jQuery, HTML5, knockoutjs

【茶包射手日記】jQuery.css()傳入數字或字串值的差異

KendoUI由2013.2.716升級到2013.3.1119後，出現kendoWindow指定位置無效的狀況。問題程式碼為$("#w").kendoWindow({ position: { top: 6, left: 6 } })，跟 官方文件 範例相同，原本運作良好，元件升級後失效。推測與元件版本有關，先使用JS偵錯工具找出kendoWindow的position相關邏輯，再比較新舊版kendo.web.js，發現以下差異: KendoUI 2013.3.1119新加入的position...

Posted 05 February 2014 10:04 PM 由 Jeffrey | with no comments 8,905

Filed under: jQuery, Kendo UI

使用jQuery傳送物件JSON到ASP.NET MVC

過去介紹過用jQuery 傳件物件陣列 及 字串陣列 到ASP.NET MVC，採取的格式一直都還是application/x-www-form-urlencoded，遇到物件陣列時會編碼成players[0][Id]=...&players[0][Name]=..；JSON是當今傳輸轉換格式的主流，比起Form UrlEncode更直覺易偵錯，如要進行客製有豐富的現成程式庫，是更佳的選擇。 要以JSON格式傳送物件給ASP.NET MVC，除POST內容需為JSON字串，更重要的是HTTP...

Posted 23 December 2013 09:30 PM 由 Jeffrey | 3 comment(s) 26,255

Filed under: jQuery, ASP.NET MVC

使用jQuery.post傳送字串陣列參數到ASP.NET MVC

本範例展示如何透過jQuery.post傳送string[]參數給ASP.NET MVC。 情境模擬訊息發送操作，提供網頁介面供使用者挑選接收者(採用複選式下拉選單)、輸入發送內容後按鈕傳送訊息給指定對象。 ASP.NET MVC Controller如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;   namespace...

Posted 14 December 2013 02:20 PM 由 Jeffrey | with no comments 14,925

Filed under: jQuery, ASP.NET MVC

再談AJAX呼叫的同步化

接獲報案: 某網頁透過AJAX新增資料，接著以AJAX方式取回資料清單，卻不見剛才新增的項目，重新整理網頁則正常。 經過一番檢測，確認與AJAX的非同步特性有關， 循序執行AJAX呼叫 的做法先前曾討論過，但這回我們改從問題剖析的角度再切入一次。 試著用以下範例重現問題。假設有一個後端ASP.NET程式如下，傳入參數mode=add時可新增字串元素，mode=clear時清除所有資料，否則傳回字串陣列內容。為求簡化，此處用Session儲存資料取代原本的DB作業。 <%@ Page Language...

Posted 17 October 2013 05:14 PM 由 Jeffrey | 9 comment(s) 35,674

Filed under: AJAX, jQuery

搜尋