Best Practices for Writing JavaScript in SharePoint 2010

JavaScript is an important part of building any interactive website, and SharePoint is certainly no exception. With SharePoint, JavaScript is often used to execute code on the client and it is usually designed to affect only one specific Web Part, as opposed to affecting an entire page. So, in a typical SharePoint page where there are many Web Parts in a zone, it's very easy to mistakenly write Java code that affects another Web Part.  The potential for such conflicts is unavoidable, so this article details some best practices for working on JavaScript and SharePoint Web Parts in SharePoint 2010.

http://community.bamboosolutions.com/blogs/sharepoint-2010/archive/2010/10/14/best-practices-for-writing-javascript-in-sharepoint-2010.aspx


Full article here

Error javascript if RadGrid binds data with Ajaxified and filtering is ON (SharePoint 2010)

Problem:


I have an UI to allow user to select a list and bind the data into grdiview. The button create will run under Ajax.

If you are using RadGrid with ajaxified in the package Telerik.Web.UI.Dll (2010.1.415.35), but did not bind the data into grid until the configuration finished, you will get the error like this: (this error just happens with filtering function is ON).

Note: Just happen on SharePoint 2010 (both of SharePoint Foundation and Office SharePoint Server)

In fact, you still see the data on gridview but some functions on grid did not work correctl such as the filtering menu is stopped working.

Symptom:

After binding data, RadGrid added a lot of javascript resources in page need to run all functions. However, these resources will not be added after binding data under ajaxified.

Solutions:

When the setting page is showing, we bind the empty data (because the grid view does not show on the page, so we can bind with any data), here I am using a simple data with one column)

//This code should be put in OnLoad() method
//and just run for the first time
//when we click on Create button, the radGrid will bind from table after collecting data
//and these code will bypassed.

if (!Page.IsPostBack)
{
   DataTable tb = new DataTable();
   tb.Columns.Add("col1");
   GridDataBound col = new GridDataBound()
   col.HeaderText = "Col1";
   col.DataField = "Col1";
   col.UniqueCol = "Col1";

   radGrid.Columns.Clear();
   radGrid.MasterTableView.Columns.Add(col);
   radGrid.DataSource = tb;
   radGrid.DataBind();
}


//Events for create button
 protected void Create_Click(object sender, EventArgs e)
{
   //Collecting data
   radGrid.DataSource = tb;
   radGrid.DataBind();
}

The purpose to bind data at the first time is to generate the JavaScript resources by RadGrid. The next step is running under Ajax, so these resource will not update after that. But we can use the filtering function correctly.

Những cách viết hay JavaScript trong SharePoint - Phần 3

3) Đăng ký StartUpScript hay BlockScript

Có rất nhiều lý do chúng ta đăng 1 đoạn script, thông thường trong C# có 4-5 cách để đăng ký. Đôi khi, lập trình viên cứ quen cách viết mặc định là ClientScript.RegisterClientScriptBlock, tác hại là code không chạy được, bỗng dưng...bực bội.

Tham khảo đoạn code sau nha:

<form action="page.aspx?...">

<script language="javascript">
var myWP = document.getElementById("ms-WP01");
var myCal = myWP.getElementsByTagName("DIV");
myCal[0].style.border = "1px solid red";
</script>

<div id="ms-WP01">
<div id="182C-0123-DB46EF67687-021C" class="ms-cal">
....
</div>
</div>

</form>

Lúc chạy trang web IE nó báo error JavaScript vàng khè ở thanh status bar, click đúp vào thì thấy "myWP is null or undefined", còn chạy Firefox thì im um bà rù.

Thắc mắc: code mình không sai, dò lại thấy trong hàm OnPrerender viết như sau

string strCode = @"var myWP = document.getElementById("ms-WP01");
var myCal = myWP.getElementsByTagName("DIV");
myCal[0].style.border = "1px solid red";";
if (!Page.ClientScript.IsRegisterClientScriptBlock("MyCode"))
{
Page.ClientScript.RegisterClientScriptBlock(this.getType(), "MyCode", strCode, true);
}

Lạ nhỉ, code đúng, build thành công nhưng chạy thì nó báo lỗi. Đơn giản thôi vì cái code JavaScript nó chạy từ trên xuống, đến đoạn nào thực thi ngay đoạn đó, code của chúng ta chạy cũng chẳng có gì phức tạp. myWP chắc chắn sẽ null, vì đến khi chạy lúc đó đối tượng ms-WP01 chưa được Render ra, document nó chưa hiểu ms-WP01 là cái mô tê gì hết.

Do vậy, để tránh những trường hợp thế này chúng ta nên để ý, đoạn code chúng ta đặt ở vị trí nào cho phu hợp, trong trường hợp này chúng ta đặt ở vị trí trước khi kết thúc tag FORM, nghĩa là dùng hàm RegisterStartUpScript, thì mọi chuyện được giải quyết êm xui.

Chúc các bạn thành công.

Những cách viết hay JavaScript trong SharePoint - Phần 2

2) Overload / overwrite

Chúng ta rất thường sử dụng các sự kiện của window và document, ví dụ như window.onload, document.onload... Đôi khi chúng ta viết riêng thì code chúng ta chạy rất tốt, nhưng khi nhúng vào 1 web site có sẵn thì chúng không chạy được hoặc một số chức năng có sẵn của web đó không chạy được, chúng ta không biết vì sao...

Thật ra khi chúng ta viết code JavaScript, độ ưu tiên là code cuối cùng được khai báo trong trình duyệt, do vậy để code có sẵn của web chạy được và code của chúng ta cũng chạy được chúng ta nên viết như sau:

1) backup lại hàm đã có
2) kiểm tra có tồn tại hay không
3) overwrite lại sự kiện đó
4) gọi lại các hàm đã backup và hàm của chúng ta

Ví dụ: trong ví dụ này chúng ta giả sữ trong window.onload chúng ta cần làm một số việc và để trong hàm wOnload.


function wOnload()
{
//TODO: làm cái gì đó đi cho vui cửa vui nhà
}

var oldF = window.onload; //backup lại hàm cũ nha
if (oldF && typeof oldF == "function")
{
//Nếu có ai đó đã định nghĩa sẵn window.onload thì nó sẽ nhảy vào đây
window.onload = function(e) {
oldF(); // Gọi hàm người ta cho nó thực thi
wOnload(); // rồi thực thi hàm của mình
}
}
else {
//Nếu không có ai định nghĩa thì quất hàm của mình luôn
window.onload = wOnload;
}

Những cách viết hay JavaScript trong SharePoint

Bài viết này xin giới thiệu cho các bạn cách chúng ta viết Code JavaScript sao cho tốt nhất và ít đụng chạm đến code của người khác.

Đôi khi chúng ta viết code JavaScript mà để code độc lập riêng mình thì nó chạy rất tốt, nhưng khi gắn cái của mình vào những chỗ có sẵn, hoặc những có có JavaScript thì code của mình tịt ngòi, không chạy được, không rõ nguyên nhân. Vậy làm sao tránh gặp những lỗi rắc rối này?

1) Tránh giá trị Null

Đôi khi chúng ta không thể xác định được giá trị của biến mình đang dùng có bị null hay không, nhất là trong những trường hợp Corssbrowser.

Ví dụ: ở IE bạn có thể sử dụng parentElement nhưng Firefox và các trình duyệt khác không bao giờ biết parentElement là cái gì, tuy nhiên khi bạn viết parentNode thì tất cả trình duyệt đều hiểu và giá trị luôn khác null. Do đó, cách tốt nhất chúng ta nên viết là:

var pNode = this.parentElement || this.parentNode;

Hay như đối tượng event ( window.event), trình duyệt firefox không hiểu nó là cái quái gì hết, Firefox chỉ hiểu event chỉ khi nào đối tượng có xảy ra 1 sự kiện nào đó, và trong sự kiện đó lập trỉnh viên phải tự thêm một argument bất kỳ để firefox gửi đối tượng event vào trong đó.

Ví dụ:


trong JavaScript chúng ta có thể viết:

function dMouseOver()
{
var evt = window.event.srcElement;
}

Với Firefox code này bó tay, chúng ta phải viết lại




function dMouseOver(e)
{
var evt = e.srcElement;
}

Như vậy trong 2 cách viết đó, chúng ta phải gộp lại thành 1 code chuẩn duy nhất mà có thể chạy trên tất cả các trình duyệt




function dMouseOver(e)
{
e = e || window.event;
var evt = e.srcElement;
}