1. Justify elements using jQuery and CS.
Trang chủ

2. File Style.
Demo
Homepage

ajaxComplete( callback )

Hiển thị 1 thông báo khi ajax load thành công:

$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});

ajaxError( callback )

Hiển thị thông báo khi ajax load bị lỗi:

$("#msg").ajaxError(function(event, request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});

ajaxSend( callback )

Hiển thị 1 thông báo trước khi ajax được gửi:

$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});

ajaxStart( callback )

Hiển thị thông báo đang tải dữ liệu khi bắt đầu yêu cầu ajax

$("#loading").ajaxStart(function(){
$(this).show();
});

ajaxStop( callback )

Ẩn thông báo loading khi kết thúc ajax.

$("#loading").ajaxStop(function(){
$(this).hide();
});

ajaxSuccess( callback )

Hiển thị thông báo khi thực hiện ajax thành công.

$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>Successful Request!</li>");
});

Xong! Bài dịch tự dịch nên không được tốt lắm. (Thương Tín ngu tiếng Anh mà )

$.getScript("test.js");

Đoạn mã trên sẽ load file test.js và thực thi các câu lệnh trong đó.

$.getScript("test.js", function(){
alert("Script loaded and executed.");
});

Lấy nội dung của file test.js, thực thi các lệnh trong file và hiển thị 1 thông báo khi đã tải và thực thi xong.

Hôm nay vào nghiên cứu em jQuery. Có lẽ là nên học xài thằng này. Hic hic! Đầu tiên là get dữ liệu qua ajax:

jQuery.get( url, [data], [callback], [type] )

• Gửi yêu cầu tới file test.php nhưng không trả về kết quả lấy đc:

$.get("test.php");

• Gửi yêu cầu tới file test.php và kèm theo dữ liệu gửi tới (không nhận dữ liệu gửi về)

$.get("test.php", { name: "John", time: "2pm" } );

Đoạn trên có nghĩa là sẽ yêu cầu file: test.php?name=John&time=2pm

• Gửi 1 mảng dữ liệu với method Get tới file

$.get("test.php", { 'choices[]': ["Jon", "Susan"]} );

Đoạn trên có nghĩa là sẽ yêu cầu file: test.php?name=John&time=2pm&choices[]=Susan

• Hiện thông báo với nội dung là kết quả trả về từ file test.php

$.get("test.php", function(data){
alert("Data Loaded: " + data);
});

• Hiện thông báo với nội dung là kết quả trả về từ file test.php?id=1&name=thuongtin.net

$.get("test.cgi", { id: "1", name: "thuongtin.net" },
function(data){
alert("Data Loaded: " + data);
});

Ukie! Đơn giản dễ chơi dễ trúng thường, bài sau sẽ là post dữ liệu qua ajax. Nhưng thực ra nó cũng tương tự như get. ^^

http://marcgrabanski.com/pages/code/jquery-ui-datepicker

Download

Demo: http://res.nodstrum.com/autoComplete/index.htm

http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

Một điều quan trọng khác cần lưu ý là làm thế nào dùng đúng hàm hồi quy. Đây là điều mà tôi thường hay quên cú pháp câu lệnh.

Dùng hàm hồi quy không tham số:

Đối với một hàm hồi quy không thông số, bạn có thể gọi theo cách sau:

$.get('myhtmlpage.html', myCallBack);

Lưu ý thông số thứ hai chỉ đơn giản là tên hàm (không truyền như một giá trị chuỗi ký tự và không có dấu ngoặc đơn). Các hàm trong Javascript được xem là những ‘khách hàng hạng sang’ và vì vậy có thể truyền như một biến số và sẽ được thực thi sau đó.

Dùng hàm hồi quy có thông số

Bạn sẽ thắc mắc “Bạn sẽ phải gọi hàm hồi quy như thế nào nếu có thông số?”.

Sai

Cách dùng sai (không hoạt động)

$.get('myhtmlpage.html', myCallBack(param1, param2));

Cách này không hoạt động vì bạn gọi myCallBack(param1, param2) sau đó lại truyền giá trị trả về như là một thông số mới cho hàm $.get().

Đúng

Cách dùng đúng

$.get('myhtmlpage.html', function(){
   myCallBack(param1, param2);
 });

Lý do, bằng cách truyền một hàm vô danh (đoạn mã với…

function() {
 /* hàm cần thực thi */
 };

…sẽ tự động gọi hàm cần thực thi với những thông số cần thiết), bạn đã hoàn tất việc gọi hàm hồi quy.

Cách dùng này đúng vì bạn truyền hàm vô danh như thông số thứ hai cho hàm $.get() mà không phải thực thi hàm đó trước khi truyền.

Tóm lại: Mỗi phương thức trong jQuery trả về câu truy vấn đối tượng của chính nó, nó cho phép bạn ‘xích’ chúng lại với nhau, ví dụ:

$("a").addClass("test").show().html("foo");

Câu lệnh này chứa những phương thức cá thể (addClass, show, và html) trả về đối tượng jQuery, nó cho phép bạn có thể tiếp dụng sử dụng phương thức để đặt cho phần tử hiện tại.

Bạn có thể dùng xa hơn nữa, bằng cách thêm hoặc bỏ phần tử từ vùng chọn, thay đổi các phần tử này và sau đó trả giá trị lại cho vùng chọn trước, ví dụ:

$("a")
   .filter(".clickme")
     .click(function(){
       alert("You are now leaving the site.");
     })
   .end()
   .filter(".hideme")
     .click(function(){
       $(this).hide();
       return false;
     })
   .end();

Bạn tạo thêm đoạn mã HTML như sau:

 <a href="http://google.com/" class="clickme">I give a message when you leave</a>
 <a href="http://yahoo.com/" class="hideme">Click me to hide!</a>
 <a href="http://microsoft.com/">I'm a normal link</a>

Các phương thức thay đổi vùng chọn của jQuery, có thể hoàn lại với end(), nó cho biết sự kết thúc của vùng lựa chọn đó và bắt đầu áp dụng lựa chọn mới:

• add(),
• children(),
• eq(),
• filter(),
• find(),
• gt(),
• lt(),
• next(),
• not(),
• parent(),
• parents() and
• siblings().

Đọc thêm Traversing API documentation để biết thêm chi tiết về các phương thức này.