AutoSuggestion TextBox In jQuery


Introduction

AutoSuggeation shows a small window like a popup panel to the display words of the prefix typed into the TextBox. For example a country text box, that will fill in the entry India when the first letter is typed, then displays a suggestion list like a popup panel.

In this article I will explain how to create an AutoSuggestion by default in jQuery

Read more of this post

Advertisements

Gọi Ajax Cross-Domain với JSONP


SONP là gì?

Khi bạn sử dụng Ajax bạn không thể gọi sang domain khác (cross domain), để giải quyết vấn đề này bạn có thể sử dụng Proxy để lấy dữ liệu từ server/domain khác sau đó trả về cho server/domain hiện tại nhưng bạn sẽ gặp khó khăn trong việc gọi dữ liệu.

JSONP hoặc JSON with Padding là phương thức dùng để gọi sang server/domain khác (cross domain), dùng JSONP bạn có thể lấy dữ liệu từ server/domain khác để trả về cho client mà không cần phải dùng proxy server.

Bạn có thể đọc thêm về JSONP ở đây

Trả về 1 loạt ảnh từ API của Flickr với JSONP (ví dụ tôi lấy ở trang jquery)

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images"></div>

<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "cat",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });
</script>

</body>
</html>

trong đoạn code trên bạn có thể để ý đến Request Url của tôi có thêm jsoncallback=?
khi bạn sử dụng JSONP thì bạn bắt buộc phải có param này.
http://api.jquery.com/jQuery.getJSON/

Xóa khoảng trắng của chuỗi với JQuery


Khi người dùng nhập dữ liệu vào textbox có thể bị thừa ra các khoảng trống ở đầu hoặc cuối textbox.

JQuery cung cấp hàm $.trim() để xóa các khoảng thừa ở đầu hoặc cuối chuỗi người dùng nhập vào textbox.

Ở đây bạn có thể bắt sự kiện OnBlur của textbox sau đó dùng hàm trim() của JQuery để xóa khoảng trống:

 

$(function () {
           $('input.textbox').blur(function () {                   
               $(this).val(
                   $.trim($(this).val())
               );
           });
       });
với mỗi thẻ input có class là textbox bạn sẽ gán sự kiện blur vào để với mỗi textbox đó bạn sẽ lấy được giá trị người dùng nhập hiện tại lên và dùng hàm trim() để xóa khoảng trắng.

tôi có textbox như sau:

<input id="Text1" type="text" class="textbox" /><br /><br />
<input id="Text2" type="text" class="textbox" />

Dùng JQuery để gọi ASP.NET Handler (ASHX)


ASP.NET Handler được dùng để trả về cho client một nội dung động từ QueryString (bạn có thể trả về dạng Image,Xml,JSON hoặc file văn bản …)

Tại sao phải sử dụng file ASHX mà không phải là ASPX?

– Nhanh hơn: khi bạn sử dụng file Ashx để trả dữ liệu về cho client sẽ nhanh hơn từ 5–>10%
khi bạn sử dụng file aspx vì file ashx chỉ sử lý 1 sự kiện duy nhất đó là ProcessRequest.

Viết Code JQuery để post dữ liệu lên ASHX

 

<scriptlanguage="javascript"type="text/javascript"src="Scripts/jquery-1.4.1.js"></script>
<scriptlanguage="javascript"type="text/javascript">
    $(function () {
        $("#btnSay").click(function () {
            $.post("Hello.ashx", { txtName: $("#txtName").val() }, function (result) {
                alert(result);
            });
        });
    });
</script>
Html Code
<input type="text" name="txtName" id="txtName" />
<input type="button" name="btnSay" id="btnSay" value="Say" />
Viết Code trong file ASHX để trả dữ liệu về cho client
public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    context.Response.Write("Hello " + context.Request["txtName"]);
}
 click vào nút btnSay để xem giá trị ở Textbox

Video lấy thông tin thời tiết của Vnexpress bằng Jquery


Download Video lấy thông tin thời tiết của vnexpress bằng Jquery

Video hướng dẫn Jquery call ajax C#


Download

jQuery – hàm xử lý style


Bài viết này nói về một số hàm dùng để can thiệp vào style của một element.
css: Dùng để lấy giá trị của một property của element trên website hoặc thiết lập giá trị cho css cho property.
.css (css property name): trả về giá trị của một property.
.css (css property, value): thiết lập giá trị cho một css property của element.
.css ( {list of properties} ): dùng để thiết lập một nhóm các thuộc tính css.
Read more of this post