2009年11月26日 星期四

使用 jQuery 的 trigger

撰寫 javascript 時,有時只是很單純的希望能夠在某些條件下,接下來要做的動作跟觸發某個按鈕一樣。其實重覆寫個一模一樣的程式並不是不行,只是違反了自己「懶」的原則。

在 jQuery 的線上文件裡,找到 trigger 這個事件,正巧是描述著可以透過程式去觸發某個控制項的事件。自己也順便練習了一下這個使用方法。

首先,在頁面放了兩個按鈕 btn1, btn2。分別會觸發 Do1() ,Do2()
<input id="btn1" type="button" value="btn1" onclick="Do1()" />
<input id="btn2" type="button" value="btn2" onclick="Do2()" />

<script language="javascript" src="js/jquery-1.3.2.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    function Do1()
    {
        alert("是的!");
    }    
    
    function Do2()
    {
        alert('吃過飯了ㄇ?');
        
        $("#btn1").trigger('click');
    }
    </script>

在 Do1(),很簡單的只是 alert 一句話。而 Do2()裡,除了 alert 「吃過飯了ㄇ?」,還順便去觸發 btn1 原本的 click 事件。所以,當 user 壓下 btn2 時,就會依序跳出兩個訊息:「吃過飯了ㄇ?」,「是的!」

ref:http://docs.jquery.com/Events/trigger

2009年11月25日 星期三

window.open 最大化

近來一直在拜求如何讓 window.open 所跳出的新視窗能夠一開始就最大化,不需讓 user 還要再去點選一次瀏覽視窗的最大化,可惜,一直沒找到真正的解決方案。

有人透過

window.open(url,"","fullscreen=yes");

雖然是把畫面變大了,但它是屬於全螢幕的呈現方式,對於一般瀏覽器操作比較不熟的 user ,可能無法很順利的處理如何解除全螢幕的設定。

最後找到比較接近需求的方式,是透過 JavaScript 去控制新開啟的視窗,把它的寬高放大到與 user 目前的螢幕相同。
他的 code 如下所示:
sc=window.open(url,"","resizable=yes,scrollbars=yes");
sc.resizeTo((screen.availWidth),(screen.availHeight));
sc.moveTo(0,0);


參考:http://www.lslnet.com/linux/f/docs1/i57/big5380574.htm

2009年11月19日 星期四

/dev/null 的功用

在 Linux ,/dev/null 目前想到的功用有兩個:

1. 清除 Log
    ex:   /home/paladin/List.log   (是某一個應用程式的 Log 檔)

            cat   /dev/null  >>  /home/paladin/List.log

             這行指令就可以簡單的清除掉目前的 Log 紀錄
          


2.開一個空白的檔案

           cat   /dev/null   >>   /home/paladin/newFile.txt

           這行指令可以新增一個空白檔案 (檔案名稱: newFile.txt )

2009年11月5日 星期四

BULK Insert

當你有大量的文字檔要輸入到 SQL Server 的資料表時,可以使用 BULK Insert 指令來完成,
且其效能會比一筆一筆 insert into 來的好。

舉例來說,你有個文字檔,其內容如下:

===== list.txt ====
李志堅,aa@3probe.com.tw
馮世華,bb@3probe.com.tw
洪崇富,cc@3probe.com.tw


測試資料表:
CREATE TABLE [dbo].[BULKTest](
 [BName] [nvarchar](50) NULL,
 [BMail] [nvarchar](100) NULL
) 

在 SQL 下,就可以執行以下指令來匯入資料到DB
BULK insert BULKTest from 'C:\MailList.txt' WITH (FIELDTERMINATOR = ',')

為了實際比較效能,另外寫了一段程式來比較:
declare @count int
set @count=0
while @count<100000
begin
insert into BULKTest (BName,BMail) values (N'李志堅','aa@3probe.com.tw')
set @count=@count+1
end
同時也將 MailList.txt 資料比數複製到100000筆,其所花費時間(秒)的結果是 2:23 真的在大量資料的環境下,使用 BULK Insert 是有利可圖的。 另外也實際測試了一下 BULK Insert 的資料來源是否可以支援網路磁碟,

BULK insert BULKTest from '\\GroupServer\share\test\MailList.txt' WITH (FIELDTERMINATOR = ',')

 結果是正常的。 如果您的資料量是好幾G以上的,建議可以參考一下「黑暗執行緒」的一篇 BULK INSERT Performance, 他提到有關 Log 資料增長的問題,因為大量新增資料後,留下的 Log 紀錄可能會灌暴硬碟空間,裡面介紹 一些參數與設定,讓你在使用 BULK Insert 時不留下 Log。 綜整所謂完美範本如下以茲盜拷:

BULK INSERT BULKTest
FROM 'C:\MailList.txt'
WITH
(
    BATCHSIZE = 1000,
    FIELDTERMINATOR = ',',
    ROWTERMINATOR = '\n',
    TABLOCK
)


參考資料:Using BULK INSERT to Load a Text File

2009年11月4日 星期三

透過 jQuery 以 ajax 方式抓取後端回傳的 xml 資料

後端伺服器要回應 xml 資料給前端網頁,你可以用 aspx 來寫,但更好的選擇,則是用 ashx (泛型處理常式)。其中的差別,在於 aspx 所回傳的是網頁型態,但 ashx 則可以回傳更多樣的型別,如圖片、附件檔、或是目前所要實現的 ajax 結果。

當然,aspx 也是可以,只是要在輸出結果前,清掉原先 aspx 頁面上預設的所有標籤。你可以事先刪除 aspx 上的 HTML 標籤,或是在 .cs 裡面寫一行 Page.Controls.Clear();  都可以。

先寫一段 aspx 後端的程式:

using System.Xml;

protected void Page_Load(object sender, EventArgs e)
{
    //建立 XMLDOCUMENT 物件
    XmlDocument ObjXML = new XmlDocument();

    //建立 根節點 物件
    XmlElement root = ObjXML.CreateElement("people");
    //插入 根節點物件到 XMLDOCUMENT 物件
    ObjXML.AppendChild(root);
    //建立子節點物件
    XmlElement user = ObjXML.CreateElement("user");
    //插入 子節點物件 到 根節點物件
    root.AppendChild(user);

    //設定子節點屬性
    user.SetAttribute("name", null, "paladin");
    //設定子節點屬性
    user.SetAttribute("cname", null, "李志堅");

    XmlDeclaration xmldecl;
    xmldecl = ObjXML.CreateXmlDeclaration("1.0", null, null);
    xmldecl.Encoding = "UTF-8";
    ObjXML.InsertBefore(xmldecl, root);
    //插入XML類型標頭
    string myxml = ObjXML.InnerXml.ToString();    


    //清除頁面上的控制項,只回傳所需的 xml 資料
    Page.Controls.Clear();
    Response.ContentType="text/xml";
    Response.Write(myxml);

}

透過這段程式,可以回傳 xml 的測試結果。
這裡要注意的,是記得設定好 Response.ContentType ,讓他為 "text/xml",如果你沒有設定,在 IE 瀏覽器可能會無法正確分辨。另外要做的,就是在輸出結果前,寫上一句: Page.Controls.Clear(); ,清除頁面上既有的HTML控制標籤。

比較推薦的方法(看起來比較專業一點啦),是用 ashx 來撰寫,程式如下:

resultXml.ashx
using System.Xml;

public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/xml";

    //建立 XMLDOCUMENT 物件
    XmlDocument ObjXML = new XmlDocument();

    //建立 根節點 物件
    XmlElement root = ObjXML.CreateElement("people");
    //插入 根節點物件到 XMLDOCUMENT 物件
    ObjXML.AppendChild(root);
    //建立子節點物件
    XmlElement user = ObjXML.CreateElement("user");
    //插入 子節點物件 到 根節點物件
    root.AppendChild(user);

    //設定子節點屬性
    user.SetAttribute("name", null, "paladin");
    //設定子節點屬性
    user.SetAttribute("cname", null, "李志堅");

    XmlDeclaration xmldecl;
    xmldecl = ObjXML.CreateXmlDeclaration("1.0", null, null);
    xmldecl.Encoding = "UTF-8";
    ObjXML.InsertBefore(xmldecl, root);
    //插入XML類型標頭
    string myxml = ObjXML.InnerXml.ToString();    

    context.Response.Write(myxml);        
    
}

使用 ashx 唯一要注意的,就是要設定 context.Response.ContentType ,將他設成 "text/xml",因為要回傳的結果是 xml 格式。

後端回傳結果:
<?xml version="1.0" encoding="UTF-8"?><people><user name="paladin" cname="李志堅" /></people>


最後,開始撰寫前端的 jQuery 叫用方法:

<script>
function DoAjax()
{   
   //{ name:"paladin" } 是用來傳到後端的參數,目前用不到   
   // $(xml).find("user") 會回傳每個 "user" 元素集合
   // 再透過 .each( ) 去取得 每個 user 元素 的屬性
   $.post("resultXml.ashx",{ name:"paladin" } ,function(xml){        
    $(xml).find("user").each(   
        function(){ 
        var _name = $(this).attr('name');
        var _cname=$(this).attr('cname');
        alert(_name);
        alert(_cname);
        $("input[id*=txt01]").val(_name+':'+_cname);        
    });
   } );
}
</script>

<asp:TextBox ID="txt01" runat="server"></asp:TextBox>
<input id="btnNoPostBack" type="button" value="NoPostBack" onclick="DoAjax()" />


如此,就有一個很完整的 jQuery 使用 ajax 傳遞 xml 的程式樣板可參考了。


ref:TIPS-神奇的jQuery XML查詢魔法

透過 jQuery 抓取網頁 URL 的參數

推薦一個 jQuery 外掛的程式,可以很輕鬆的完成抓取目前 url 上的參數。
詳細網站可以參考:
JQUERY.URL.JS (http://ajaxcssblog.com/jquery/url-read-request-variables/)

使用方法,
需先引用 jQuery.js ,再加上 jquery.url.js

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.url.min.js"></script>

當你要使用時,只要執行 $.url.param("參數名稱") 就可以取得參數值
舉例來說:
如果你目前的網頁是 http://www.xxx.com.tw?paladin=handsome
$.url.param("paladin") 則會回傳 handsome

但如果所查詢的參數是不存在,則回傳空字串,
同上例: $.url.param("hugo")   就回傳空字串啦。

如果你希望將url 後面所有的參數都抓回存成陣列,則可以使用
$.url.paramAll()  即會回傳所有參數集合的陣列

下載網址:
jquery.url.js
jquery.url.min.js 

附上作者原始 source code:

/*
jQuery Url Plugin
 * Version 1.0
 * 2009-03-22 19:30:05
 * URL: http://ajaxcssblog.com/jquery/url-read-get-variables/
 * Description: jQuery Url Plugin gives the ability to read GET parameters from the actual URL
 * Author: Matthias Jäggli
 * Copyright: Copyright (c) 2009 Matthias Jäggli under dual MIT/GPL license.
*/
(function ($) {
 $.url = {};
 $.extend($.url, {
  _params: {},
  init: function(){
   var paramsRaw = "";
   try{
    paramsRaw = 
     (document.location.href.split("?", 2)[1] || "").split("#")[0].split("&") || [];
    for(var i = 0; i< paramsRaw.length; i++){
     var single = paramsRaw[i].split("=");
     if(single[0])
      this._params[single[0]] = unescape(single[1]);
    }
   }
   catch(e){
    alert(e);
   }
  },
  param: function(name){
   return this._params[name] || "";
  },
  paramAll: function(){
   return this._params;
  }
 });
 $.url.init();
})(jQuery);

JQuery 取得 checkbox 群組內被選取的項目



在 ASP 程式裡,只需要下 Request("cbox") 語法,就可以將所有 checkbox name="cbox" 的項目內容取回並以逗號(,)區隔。可是在 JQuery 就沒辦法用一行指令來完成了。以下分別使用 jQuery 與 JavaScript 來完成同樣的目的。

首先定義一下情境。

<input type="checkbox" name="pet" value="1"/>
<input type="checkbox" name="pet" value="2"/>
<input type="checkbox" name="pet" value="4"/>

<BR>
<input type="button" value="JQueryclick" OnClick="JQClick()" />
<BR>
<input type="button" value="JSclick"  onclick="JSClick()"  />

一共有三個 checkbox ,都是同樣的 name (pet),另外多了兩個 button,一個是呼叫 jquery 寫法,另一個則是 javascript 。

既然有要使用 jQuery,所以一開始就要記得將 jQuery.js 引用進來:
<script src="jquery.js" type="text/javascript">

接著就需要定義 JQClick() 與 JSClick() 。

JQClick:
function JQClick()
{  
   var str="";  
//$("input[name=pet]:checked") 
//可以先將畫面上 name=pet 且 有被勾選的 checkbox 選出來   
//然後再透過 each ( ) 去分別處理每個被選取的項目
   $("input[name=pet]:checked").each(function(i){str=str+$(this).val()+",";})
//將字串最後一個逗號去除
   if(str.length>0)
     str=str.substr(0,str.length-1);
     alert(str);
}

JSClick:
function JQClick()
{
  var checkedItems=""
  //取得畫面上 name = pet 的元素,他會回傳一個陣列集合
  var ckItems=document.getElementsByName('pet');
  //針對陣列集合的項目逐筆去處理
  for ( var i=0;i
    //如果有被勾選 ,才記錄下來
    if(ckItems[i].checked==true)
    {    
       checkedItems=checkedItems+ckItems[i].value+",";
    }
  }

  if(checkedItems.length>0)                
     checkedItems=checkedItems.substr(0,checkedItems.length-1);

  alert(checkedItems);
}

2009年11月1日 星期日

少做


想做的事情,永遠都做不完
該做的事情,往往都忘了做
你可以當個濫好人,讓生活忙碌下去
也可以聰明去選擇,讓生命更有意義

慶生的時候,只給壽星三個願望,
並非大家小氣吝嗇,
而是要你去找出生命裡重要的事

如果你什麼事都想做,那乾脆去把圍裙穿上,
對著老闆說:「主人,今天您需要什麼服務?」

有本書譯名為「少做一點不會死」
但自己卻不這麼認為,
如果你指導教授叫你寫論文,
而你卻不寫,看你會不會死。

然而,如果你用心去做你該做的事,
剔除不必要的工作,
自然所做的事情就少了。

「少做」,並非方法,而是結果。

我比較肯定原書作者的標題:「The Power of Less 」

但「少做」,不代表你將更輕鬆、更有自己的時間,
而是更明確知道自己為何而活、為何而做。

你若問我自己做到了沒,
我會回答:「主人,今天中午要去哪裡吃飯?」