jQuery


31
Oct 09

Use synchronous request in jQuery.ajax

Đã bao giờ bạn sử dụng AJAX (jQuery) để check username tồn tại như sau chưa?

[-]?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function checkUser(u) {
    var isExist = false;
    $.post(
        'index.php',
        {'username': u},
        function(ret) {
            isExist = ret;
        }
    );
 
    return isExist;
}
 
if( checkUser('donamkhanh') ) {
    alert('donamkhanh already exist');
}
else {
    alert('donamkhanh does not exist');
}

Theo bạn, nếu chạy đoạn mã trên thì sẽ ra kết quả nào (giả sử rằng server script hoàn toàn chạy chính xác, trả về giá trị true/false hay 1/0 gì đó & username donamkhanh đã tồn tại)?

Do mặc định trong jQuery tất cả các request đều được sent asynchronous nên trong quá trình send request thì hàm checkUser đã return luôn giá trị lúc khởi tạo biến isExist = 0 rồi. Vậy nên kết quả luôn thông báo là username donamkhanh chưa tồn tại :)

Cách fix rất đơn giản, sử dụng thuộc tính async của $.ajax. Các hàm $.post hay $.get không có thuộc tính này vì

This is jQuery’s low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don’t offer as much functionality (such as error callbacks).

Code ở trên sẽ sửa lại như sau:

[-]?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function checkUser(u) {
    var isExist = false;
    $.ajax({
        async: false,
        type: "POST",
	url: "ajax.php",
	data: "username=" + u,
	success: function(msg){
	     isExist = msg;
	}
    });
 
    return isExist;
}

Nếu set async = false, jQuery sẽ sử dụng synchronous cho các request. Ở ví dụ này bạn có thể thấy nó chưa thực sự cần thiết (vì có thể nhét đoạn check vào luôn trong callback function của $.post, $.get hay bất cứ ajax method nào của jQuery), tuy nhiên nếu bạn phải viết nhiều hàm (ajax) và các hàm này lấy kết quả của nhau để tính toán thì việc set synchronous là bắt buộc. Nếu không thì sẽ xảy ra tình trạng nhiều biến nhiều hàm lon ton cầm đèn dầu chạy trước ô tô ^^

[Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

8
Sep 09

Parse single Javascript object in Jquery by $.ajax method

Chưa thử test với Jquery phiên bản mới nhất, mới chạy trên bản 1.2.1 (dự án hiện tại đang dùng :( ). Khi sử dụng $.ajax như bên dưới thì phát sinh lỗi:

[-]?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
	type: "POST",
	url: document.location.href,
	data: "card_type=" + cardType + "&card_number=" + cardNumber,
	dataType: 'JSON',
	cache: false,
	success: function(responses){
	    if(!responses.has_error)
	    {
	 	alert("Please enter valid Card Number.");
	 	return false;
	    }
       }
});

thì bị lỗi. Mặc dù response là {‘has_error’: false;} nhưng lại không nhảy vào khối lệnh IF.
Cách khắc phục rất đơn giản:

[-]?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
...
success: function(responses){
    var obj = eval('('+responses+')');
    if(!obj .has_error)
    {
	alert("Please enter valid Card Number.");
	return false;
    }
}

Lưu ý: Chỉ xảy ra lỗi này nếu response là single object, nếu nó là mảng các object thì cứ $.each rồi get theo key, val thì lại ko sao :(

[Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

20
Dec 08

Accept only positive number using Jquery

Có thể sử dụng Event Handling hoặc Event Helper. Tất nhiên là sử dụng Event Helper thì ngắn hơn rồi :)

[-]?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
//when key is pressed in the textbox
$("#quantity").keypress(function (e)
{
  //if the letter is not digit then display error and don't type anything
  if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57))
  {
    //display error message
    $("#errmsg").html("Digits Only").show().fadeOut("slow");
    return false;
  }
});

Mình quen viết thế này hơn:

[-]?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
//when key is pressed in the textbox
$("#quantity").keypress
(
    function (e) {
        //if the letter is not digit then display error and don't type anything
        if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) {
            //display error message
            $("#errmsg").html("Digits Only").show().fadeOut("slow");
            return false;
        }
    }
);

Nguồn: http://roshanbh.com.np/2008/04/textbox-accept-only-numbers-digits.html

[Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

28
Aug 08

Upgrade whois domain to v3.1

Lý do phải nâng cấp:
- Matbao.net đã thay đổi lại cấu trúc site của họ (thay đổi giao diện) nên phần parse data của mình sẽ không chính xác nữa.
- Dùng nsloop-up chỉ có thể check domain đó có hoạt động hay không, chứ không check được đã được mua hay chưa. Có thể chủ sở hữu đã mua nhưng chưa active domain :)

Những thay đổi:
Không có nhiều thay đổi trong phiên bản nâng cấp này ngoài:
- Get xml content thay cho html content.
- Chuẩn hóa các function theo camelCase.
- Bỏ php short tag, chuyển về <?php echo …;?> nếu có.

Todo:
Mặc dù kết quả nhận được từ matbao.net là dạng XML nhưng vẫn gặp khó khăn trong khâu parse XML. Dùng các libs có sẵn trong PHP như simpleXML, XMLparse… đều bị lỗi do syntax của file XML này không chuẩn cho lắm. Tạm thời tôi dùng preg_match để parse XML. Khi nào có điều kiện sẽ nghiên cứu cách parse XML mà không biết trước cấu trúc :D Có bác nào tốt bụng thì phát triển thêm hộ tôi với :p

Hướng dẫn nâng cấp:
- Download bản upgrade tại http://donamkhanh.com/download/whoisv3.1.php.txt http://donamkhanh.com/download/whoisv3.2.php.txt
- Sau khi download, rename file whoisv3.1.php.txt whoisv3.2.php.txt thành index.php, rồi ghi đè file index.php trong thư mục whoisv3 (nếu chưa có phiên bản 3.0 thì có thể download tại http://donamkhanh.com/download/whoisv3.tar.bz2)

Yêu cầu:
- Chmod quyền hợp lý (cho đọc ghi đối với file checked_domain.txt)
- Thông số allow_url_fopen trên host phải thiết lập bằng On.

[Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

13
May 08

How to select the first option in a combo box?

Simply in jQuery (a Javascript framework – Write less, do more):

[-]?View Code JAVASCRIPT
1
$("#div_id option:first).attr("selected","selected"); 

Example: 

[-]?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
$('#myCombo').load(
                              'my_combo.php?foo=bar',
                               function() {
                                     $('#myCombo option:first).attr("selected","selected");
                               }
                      );
html:
<select id="myCombo"></select>
[Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

4
Apr 08

jWYSIWYG

 

Một trình editor tý hon cho web :yes:

Có lẽ mình nên chuyển sang dùng thằng này chăng? Cái mà thằng này đang thiếu là gì? Chắc chỉ cần thêm chức năng upload ảnh nữa là đủ rồi. Người dùng cần gì? Cũng chỉ là format đoạn văn bản, chèn ảnh, chèn link (riêng 2 cái chèn ảnh chèn link lại tuỳ vào đối tượng khách hàng mà có nhu cầu sử dụng khác nhau. Người thì chỉ cần lấy link ảnh ở chỗ khác paste vào là okie, người thì thích tự upload lên, rồi link điền vào luôn, nguời thì thích upload riêng rồi browse chọn file để lấy link….) đủ kiểu.

Dù thế nào thì tôi cũng rất khoái thằng editor này, nhỏ gọn. Ít ra có thể áp dụng cho phần guest form :yes:

Hứng thú với editor này? Mời bạn vào link này để biết thêm: http://code.google.com/p/jwysiwyg/

[Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

20
Jan 08

Whois domain version 3.0

Nâng cấp bản 1.0 lên thành 3.0, cho phép quick check theo phần mở rộng của domain.

Một số tính năng mới:

  1. Phần mở rộng có thể tùy biến bằng cách thêm vào trong file list_ext.txt (phân cách nhau bằng ký tự Enter: \n).
  2. Lưu lại các domain đã được check vào file checked_domain.txt.
  3. Tốc độ quick check nhanh (chỉ sử dụng nslookup).

Hàm chính của version lần này chính là hàm quick_checklist_extension

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
function quick_check($domain,$ext) {if(empty($domain))
 
echo 'You must enter domain name to check.';
 
else
 
{
 
if(!eregi("^([[:alnum:]-])+$",$domain))
 
echo 'Domain name contain alphabet, number &amp; dash character only.';
 
else
 
{
 
$data = popen("(nslookup -timeout=5 -query=ANY -nodef $domain$ext)2&gt;&amp;1","r");
 
$result = '';
 
while (!feof($data))
 
{
 
$result.= fgets($data, 1000);
 
}
 
$find = stripos($result, "can't find");
 
if($find=== false) {
 
echo "<span class="\">$domain$ext</span>  This domain has taken. (<a href="\">whois</a>)";
 
}
 
else
 
echo "<span class="\">$domain$ext</span>  This domain has available."; 		}
 
$fp=fopen("checked_domain.txt","a");
 
fwrite($fp, $domain.$ext."t".date("H:i:s - d/m/Y")."n");
 
fclose($fp);
 
}
 
}
 
function list_extension()
 
{
 
$filename = 'list_ext.txt';
 
$handle = fopen($filename,"r");
 
$data = fread($handle,filesize($filename));
 
$ext = explode("n",$data);
 
$list_ext = '';
 
if(count($ext)!=0) {
 
for($i=0;$i &lt; count($ext);$i++)  {
 
if($i%3==0)
 
      $list_ext.='
 
<input name="ext" type="checkbox" value="'.$ext[$i].'" />'.$ext[$i].'';
 
else
 
       $list_ext.='
 
<input name="ext" type="checkbox" value="'.$ext[$i].'" />'.$ext[$i].'';
 
}
 
return $list_ext.'
 
 
 
Check all ';
 
}
 
else {
 
return '
 
List extension not available. ';
 
}
 
}

Demo: http://donamkhanh.info/lab/ajax/whoisv3

[Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

15
Jan 08

Drag n Drop Islands

Kéo và thả nào :D

Giờ chưa có thời gian viết code cụ thể được, cứ để link demo đã, khi nào rảnh quay lại viết sau :p

http://donamkhanh.com/lab/ajax/drag_n_drop_island

[Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

31
Dec 07

Get Alexa Rank

Sau mấy hôm làm mấy cái Get Yahoo Avatar, Get Domain, giờ đến thằng Alexa rank.

Thật ra mình muốn làm cái get rank này lâu lắm rồi, từ cái hồi xem cái kết quả này. Nhưng khi bắt tay vào thì gặp khó khăn 1 chút. Alexa “chơi khó” bằng cách sinh ra mấy cái thẻ . Cách này của Alexa hay phết, khi mình copy kết quả rank, paste nó lại ra số linh ta linh tinh. Giờ thì biết tại sao. Nhưng biết là 1 chuyện, làm được lại là 1 chuyện. Googled, thấy quá trời giải pháp. Trong đó có 1 chú cũng giải quyết theo cách của mình (bóc tách, dùng cURL). Nhưng (lại nhưng), Alexa nó có cho tra theo dạng xml thì tại sao lại không dùng nhỉ, bóc tách làm gì cho mệt cơ chứ. Vậy là theo hướng dùng XML

Okie, done!

Demo http://donamkhanh.com/lab/ajax/get_alexa_rank (Alexa chỉ tính rank cho domain chính thôi chứ ko tính cho từng subdomain đâu nha, bác nào nhập blog Yahoo hay Opera thấy rank cao đừng sướng nhá)

[Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

30
Dec 07

Currency converter

If you want to convert from your currency to other currency or else, you can use this utility. It get result from Yahoo Finance (Ask value) so you can trust return value

Technology:

This code is free (GNU license) but if you make money by it, you can share to me, I don’t refuse money :p

For demo: http://donamkhanh.com/lab/ajax/currency_converter

[Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]