Appending Dynamic Rows to a a table using JQuery

Here is piece of code I came across that is useful when we need to append dynamic content to a HTML table using JQuery.


function fuGetRoolListOnSuccessCallBack(args) {
    var table = $("#tblRoomList");
    table.html("");

    var TR = document.createElement("TR");
    var TH = document.createElement("TD");
    $(TR).appendTo(table);
    $(TH).appendTo(TR)
                    .html("RoomID");
    TH = document.createElement("TH");
    $(TH).appendTo(TR)
                    .html("RoomName");
    TH = document.createElement("TH");
    $(TH).appendTo(TR)
                    .html("MaxUser");
    TH = document.createElement("TH");
    $(TH).appendTo(TR)
                    .html("CurrentUser");
    TH = document.createElement("TH");
    $(TH).appendTo(TR)
                    .html("Join");

    $(args).each(function (i) {
        var tr = document.createElement("TR");
        var td = document.createElement("TD");
        $(tr).appendTo(table);
        $(td).appendTo(tr)
                    .html(this.RoomID);
        td = document.createElement("TD");
        $(td).appendTo(tr)
                    .html(this.RoomName);
        td = document.createElement("TD");
        $(td).appendTo(tr)
                    .html(this.MaxUser);
        td = document.createElement("TD");
        $(td).appendTo(tr)
                    .html("<span id='_cu_" + this.RoomID + "'>" + this.CurrentUser + "</span>");
        td = document.createElement("TD");
        $(td).appendTo(tr)
                    .html("<input type='button' value='Join' onclick=\"fnJoinChatRoom('" + args[i].RoomID + "')\" />");
    });

    CloseMessageBox();
}

// Join one chat room
function fnJoinChatRoom(roomid) {
    ShowMessageBox("Joining Chat Room", "Joining Chat Room");
    csaspnetajaxwebchat.transition.JoinChatRoom(
                roomid,
                $("#txtAlias").val(),
                fnJoinChatRoomOnSuccessCallBack);
}
function fnJoinChatRoomOnSuccessCallBack(args) {
    CloseMessageBox();
    if (args != null) {
        var chatbox = new WebChat.ChatBox();
        chatbox.open(args.RoomID, args.RoomName);
    }
    else {
        ShowMessageBox("Error", "Arguments is error: ChatRoomID!");
    }
}

Courtsey: Codeplex.com

Showing a Loading image spinner while a JQuery UI Dialog is loading

If you are using JQuery UI extensively in your project and using its cool widgets like Jquery dialog popup etc. then this post will be helpful for you.

If you are rendering some heavy HTML data in JQuery dialog, then there might be some delay in loading of that dialog. It would be nice if some cool (Ajax loading) spinner image  is displayed to user until it is rendered. Now this thing can be done in many ways but simplest of them all is the one described below:

Say, you are loading the dialog on the div element 'popUpDiv'

Client ID problem when moving from .NET framework 3.5 to 4.0

HI guys,
ASP .NET automatically assigns a unique client ID to each and every server side control to make them distinguishable irrespective of the fact that whether 'id' attribute is applied to that control or not. This would be used by various client side operations like JavaScript functions etc.. Now recently we migrated our project from framework from 3.5 to 4.0. And after that I noticed that all the controls that were used in previous framework with prefix like ctl00.. became invalid. Then I figured that the mechanism through which ASP .NET 4.0 assigns the clientID is different from earlier versions. It uses a much cleaner approach like that of simple HTML controls in assigning clientId i.e instead of ctl00Master_XYZ it will use only XYZ as clientd Id.

What if we have used hardcoded autogenerated clientID in javascript functions.
First thing, as good coding convention we should not use the hardcoding of dynamic entity like clientId. You should use this way: <%= Control.ClientID %>'. Now if in any case you have used this thing and owe this 'Technical Debt', then other way is change the clientID Mode. clientId Mode can be changed at control level, Page level or at application level.Using this syntax:

<asp:Label ID="Label1" runat="server" ClientIDMode="[Mode Type]" />

Here set the Mode Type to 'legacy' or 'AutoId'.
It's done!!!
Other Mode types supported are :
Inherit
Static
Predictable


More info on these at
http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

Special care while Migrating an MVC application from IIS6 to IIS7

Hi,
I had a MVC based application that was earlier hosted on IIS 6. Now IIS 6 doesn't support extensionless URL routes by default, so we need to add some extension to the controller name in the default route defined like {ControllerName}.aspx\{Action method}\{Id} in IIS6. Also we if we wanted to go for some other extensions like .mvc etc. then we needed to map it using techniques like wildcard mappngs etc.
Now when we have migrated to IIS7, then extensionless URLs are supported which means URLs can be there which don't have any corresponding physical location.
So when you are migrating your MVC application to IIS7 then make sure the default route define in Globla.asax don't have any extension defined with controller like {controller}.aspx\{action method}\{Id} and change it to \clean URL route {Controller}\{Action Method}\{ID(optional)}.
Second thing you should keep in mind that the pipeline mode of AppPool of the website should be set to Integrated from classic.
That's all now your website is ready to be hosted on IIS7.

IE8 Bug: Jumping Scrollbars

Here is the new bug that is very popular in IE8 explorer. This is often termed as Jumping Scrollbar. The problem  occurs when text is appended at the end of text area then the scrollbar automatically bounces to the top. This is really annoying when user is in middle of typing something. Now several patches are their on web to resolve this issue. This problem occurs when the width of the text area is given in  percentage terms in CSS. The simplest solution to this problem is provide the width of the text  area in in absolute terms instead of percentage terms, like 750 px. Hope Microsoft will resolve this issue soon.  

Create a Treeview from a external XML file using JStree JQuery Plugin

Hi there,
I will show you how you can create a treeview using the jstree plugin by feeding it with external XML file. I have created the following XML file. Named Book.xml.

 Then after creating the xml file download the jstree plugin from here.

Then you need to create a Javascript file named "UIMTreeProcessor.js" with the following code:

function UIMTreeProcessor(data, treeEl) {
 this.data = data;
 this.treeEl = treeEl;
}
 
UIMTreeProcessor.prototype.initTree = function(data){
 this.treeEl.jstree({
  "json_data" : {
   "data":data,
   "progressive_render":"true"
  },
  "plugins" : [ "themes", "ui", "json_data" ],
  "core":{"animation":0}
  });
}
 
UIMTreeProcessor.prototype.doProcess = function(){
 //Find root:
 var _root = $(this.data).children(':first-child');
 var _a_feed = new Array();
 
 this.vsTraverse($(_root), _a_feed);
 
 var _treedata = [{"data":_root[0].nodeName,"children":_a_feed, "state":"open"}];
 this.initTree(_treedata);
}
 
UIMTreeProcessor.prototype.vsTraverse = function(node, arr){
 var _ch = $(node).children();
 
 for(var i=0; i<_ch.length; i++){
  var _vsArr = new Array();
  this.vsTraverse(_ch[i], _vsArr);
  var _a_att = this.vsTraverseAtt(_ch[i]);
  if(null!=_a_att){
   _vsArr.push([{"data":"Attributes "+"["+_ch[i].nodeName+"]","children":_a_att, attr : { "class" : "uim_attr"}}]);
  }
  if(null!=_ch[i].firstChild && 3==_ch[i].firstChild.nodeType){
   arr.push([{"data":_ch[i].nodeName + ": " + _ch[i].firstChild.textContent,"children":_vsArr, "state":"open"}]);
  }else{
   arr.push([{"data":_ch[i].nodeName,"children":_vsArr, "state":"open"}]);
  }
 
 }
}
 
UIMTreeProcessor.prototype.vsTraverseAtt = function(node){
 var _a_atts = null;
 if(null!=node.attributes && node.attributes.length > 0){
  _a_atts = new Array();
  for(var i=0; i<node.attributes.length; i++){
   _a_atts.push(node.attributes[i].nodeName + ":" + node.attributes[i].nodeValue);
  }
 }
 return _a_atts;
}

Then you need to add reference to all the scripts in your html/ASP.NET code beside.
 After that add the following code in the script section of your HTML page.

var _url = "example_01.xml";
  var _uimTree = null;
 
  $(function () {
   getTopContent();
  });
 
  getTopContent = function(){
   $.ajax({
    type: "GET",
    url: _url,
    dataType:"xml",
    cache: false,
    beforeSend:function(){
     //do something before send
    },
    success: function(data){
     processXML(data);
    },
    error:function(e){
     alert("Error: "+e);
    }
   });
  }  
 
  processXML = function(root){
   _uimTree = new UIMTreeProcessor(root, $("#jstree"));
   _uimTree.doProcess();
  }

Then add the following Div sectionin your HTML page:

div id="jstree" style="height:500px; overflow-y:auto;" class="ui-corner-all ui-widget-content"></div>
Here is how it would look like:

Now you are done...Njoy..
You can check the complete post with download links here: