JSON (Javascript Object Notation)

1. Cơ bản về JSON  var data =

{

sales: [{firstName:”Nguyễn Văn “,lastName:”A”},{firstName:”Trần Văn “,lastName:”B”}];

}

* Giải thích:

– Mảng json được định nghĩa trong cặp thẻ  “[” và “]”

– object json được định nghĩa trong cặp thẻ “{” và “}”, ngăn cách nhau bởi dấu phẩy “,”

– Thuộc tính của json dựa trên key/value ngăn cách bởi dấu 2 chấm “:”, các thuộc tính ngăn cách nhau bởi dấu phẩy “,”

* Ví dụ: để duyệt qua mảng trên 

for(var i = 0; i<data.sales.length; i++)

{

document.write(“FirstName =  ” + data.sales[i].firstName);

document.write(“LastName = ” + data.sales[i].lastName);

}

* Muốn chuyển đối tượng JSON sang dạng chuỗi thì ta dùng JSON.stringify(data)

var jsonStr = JSON.stringify(data);

document.write(jsonStr);

* Muốn chuyển string dạng JSON sang mảng đối tượng ta dùng JSON.parse(jsonStr)

var dataOrigion = JSON.parse(jsonStr);

for(var i = 0; i<dataOrigion.Sales.length; i++)
{
document.write(‘FirstName: ‘ + dataOrigion.Sales[i].firstName + ‘<br/>’);
document.write(‘LastName: ‘ + dataOrigion.Sales[i].lastName + ‘<br/>’);
}

JavaScript Ebooks

Link tham khảo: http://www.flazx.us/result/31499/javascript

1. Pro JavaScript Design Patterns

Chi tiết tại đây: http://jsdesignpatterns.com/

Download Ebook tại đây: http://rapidlibrary.com/index.php?q=pro+javascript+design+patterns

2. JavaScript & DHTML Cookbook
http://trafficshare.eazyupload.net/d/sN3RdRD6

3. JavaScript Application Cookbook

http://trafficshare.eazyupload.net/d/N2d7Zapv

4. Wrox Ebook

http://www.wrox.com/WileyCDA/Section/id-WROX_SEARCH_RESULT.html?query=javascript

Cảnh báo online cho bus

/*----------------------------------------------------------------------------------------------------*/
//                          Canh bao online cho bus

var ONLINE_WS_URL = "MapServices.asmx/";

// =============================================
// Author: trungtq
// Create date: 15/11/2011
// Description:	<Load popup canh bao>
// =============================================
function loadLoaiCanhBao() {
    var wsUrl = ONLINE_WS_URL + "LayDanhSachLoaiCanhBaoOnline_Bus";

    // Error Handler for AJAX requests
    jQuery.callDotNet.onError = function(error) { alert(error); };

    var objPara = {};

    // Call to the web service
    jQuery.callDotNet(wsUrl, JSON.stringify(objPara), cbSuccefull_loadLoaiCanhBao);

    // MapServices.LayDanhSachLoaiCanhBaoOnline_Bus(cbSuccefull_loadLoaiCanhBao);
}

// =============================================
// Author: trungtq
// Create date: 15/11/2011
// Description:	<Bind option vao combobox va load du lieu len grid>
// =============================================
function cbSuccefull_loadLoaiCanhBao(re, arg) {

    if (re != null && re.length > 0) {
        var drdCB = document.getElementById('ddlAlert');

        drdCB.options.length = 0;
        var option = document.createElement('option');
        option.value = "-1";
        option.text = "Tất cả";

        drdCB.add(option, null);

        for (var i = 0; i < re.length; i++) {
            var op = document.createElement('option');
            op.value = re[i].Loaicanhbao;
            op.text = re[i].TenLoaiCanhBao;
            op.id = re[i].Loaicanhbao;
            try {
                drdCB.add(op, null); //Standard
            } catch (error) {
                drdCB.add(op); // IE only
            }
        }
    }
    //Goi ham load danh sach canh bao theo loai canh bao
    loadDuLieuCanhBaoOnline_Bus();
}

// =============================================
// Author: trungtq
// Create date: 15/11/2011
// Description:	<Goi service tra ve list objects>
// =============================================
function loadDuLieuCanhBaoOnline_Bus() {
    debugger;

    var Id_CB = 0;
    var drdCB = document.getElementById('ddlAlert');
    for (var i = 0; i < drdCB.options.length; i++) {
        if (drdCB.options[i].selected) {
            Id_CB = drdCB.options[i].value;
            break;
        }
    }

    var wsUrl = ONLINE_WS_URL + "LayDuLieuCanhBaoOnline_Bus";

    // Error Handler for AJAX requests
    jQuery.callDotNet.onError = function(error) { alert(error); };

    //tham so cho services (phai trung ten voi params cua service)
    var objPara = { 'companyID': CongTyID, 'alertType': Id_CB };

    // Call to the web service
    jQuery.callDotNet(wsUrl, JSON.stringify(objPara), cbSuccefull_loadDuLieuCanhBaoOnline_Bus);
}

// =============================================
// Author: trungtq
// Create date: 15/11/2011
// Description:	<Render ra noi dung canh bao ben duoi>
// =============================================
function cbSuccefull_loadDuLieuCanhBaoOnline_Bus(re, arg) {
    debugger;
    var tblPopup = document.getElementById('tblAlertOnline');
    var html = '';
    html += '<tr style="text-align:center; border: 1px solid #666;">';
    html += '<th style="width:100px; border: 1px solid #666;">' + 'Biển số xe' + '</th>';
    html += '<th style="width:150px; border: 1px solid #666;">' + 'Ngày tháng' + '</th>';
    html += '<th style="width:200px; border: 1px solid #666;">' + 'Loại cảnh báo' + '</th>';
    html += '<th style="width:150px; border: 1px solid #666;">' + 'Nội dung cảnh báo' + '</th>';
    html += '<th style="width:100px; border: 1px solid #666;">' + 'Trạng thái' + '</th>';
    html += '</tr>';

    if (re != null && re.length > 0) {
        // ve bang du lieu table
        for (var i = 0; i < re.length; i++) {
            var parameters = CongTyID + ',' + re[i].VehicleID + ',' + "'" + re[i].Ngay + "'";

            html += '<tr style="text-align:left; border: 1px solid #666;">';
            html += '<td style=" border: 1px solid #666;">' + re[i].BienSo + '</td>';
            html += '<td style=" border: 1px solid #666;">' + re[i].Ngay + '</td>';
            html += '<td style=" border: 1px solid #666;">' + re[i].TenLoaiCanhBao + '</td>';
            html += '<td style=" border: 1px solid #666;">' + re[i].NoiDungCanhBao + '</td>';
            html += '<td style=" border: 1px solid #666; text-align:center;">'
            html += '<a onClick="javascript:changeAlertStatus(' + parameters + ')" href="javascript:void(0)"  >' + 'Chưa xử lý' + '</a>';
            html += '</td></tr>'
        }
        tblPopup.innerHTML = html;
    }
    else {
        tblPopup.innerHTML = html;
    }

}

// =============================================
// Author: trungtq
// Create date: 15/11/2011
// Description:	<Dong cua so popup>
// =============================================
function closePopupOnline() {
    var divElement = document.getElementById('divAlertOnline');
    divElement.style.visibility = 'hidden';
};

// =============================================
// Author: trungtq
// Create date: 15/11/2011
// Description:	<Thay doi trang thai canh bao khi nguoi dung click vao >
// =============================================
function changeAlertStatus(companyID, vehicleID, timeAlert) {
    debugger;

    var wsUrl = ONLINE_WS_URL + "UpdateStatusCanhBaoOnline_Bus";

    // Error Handler for AJAX requests
    jQuery.callDotNet.onError = function(error) { alert(error); };

    var objPara = { "companyID": companyID, "vehicleID": vehicleID, "timeAlert": timeAlert };

    // Call to the web service
    jQuery.callDotNet(wsUrl, JSON.stringify(objPara), loadDuLieuCanhBaoOnline_Bus);
}

loadLoaiCanhBao();
//Ket thuc canh bao online cho bus
/*----------------------------------------------------------------------------------------------------*/

Sử dụng jQuery

1. Nhúng jQuery vào trang của mình

Cách 1:

<script src=”path/jquery-1.4.2.js” type=”javascript”></script

Cách 2:
<asp:ScriptManager id="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference path="Scripts/jquery-1.2.6.min.js" />
    </Scripts>
</asp:ScriptManager>

2. The magic dollar sign ($) and a chain of operations

In jQuery, the most powerful character / symbol is the dollar sign. A $() function normally returns a set of objects followed by a chain of operations. An example

1.$("div.test").add("p.quote").html("a little test").fadeOut();

Think of it as a long sentence with punctuations. Indeed it is a chain of instructions to tell the browser to do the following:

  1. Get a div with class name is test;
  2. Insert a paragraph with class name is quote;
  3. Add a little text to the paragraph;
  4. Operate on the DIV using a predefined method called fadeout.

So there it is, the first two basics: $() and chainable.

3. Document.Ready()

The most commonly used command in jQuery is Document.Ready(). It makes sure code is executed only when a page is fully loaded. We often place code blocks inside this Document.Ready() event. For example:

1.$(document).ready(function(){
2.$("#buttonTest").click(function(event){
3.alert("I am ready!");
4.});
5.});
4.  Calling a page method from jQuery
<script type="text/javascript">
      $(document).ready(function() {
          $.ajax({
              type: "POST",
              url: "pagemethod.aspx/sayHello",
              contentType: "application/json; charset=utf-8",
              data: "{}",
              dataType: "json",
              success: AjaxSucceeded,
              error: AjaxFailed
          });
    });
      function AjaxSucceeded(result) {
          alert(result.d);
      }
      function AjaxFailed(result) {
          alert(result.status + ' ' + result.statusText);
      }
  </script>