XMLHTTPJSClass - JSON Class for Ajax Operations

Share |

In the development of Ajax application many times we may come across following issues.

• Need to update multiple text boxes simultaneously.
• Fill more that one dropdown lists.
• Combination of text boxes, dropdown lists and div tags.
• Calling different web pages and different webservices

Means one event may lead to updating of many html elements. In such cases we will have to send Ajax request in a loop. Again for each request we will have to take care of timeouts and request failures. Here if data is static we can keep it on HTML page and using JavaScript can directly hide and show the contents. But if we have to use real time data and also choices of display vary according to choices of the user, in such case looping of Ajax request may not be a good idea.

In this article we will discuss about XMLHTTPRequest object and JavaScript. We will develop a JavaScript class in which we can vary our choices and also be able to update multiple HTML contents. Also this class can be extended as per the requirements.

We will first talk about class in JavaScript, there is no keyword called class in JavaScript but we can use function as a class.

Checkout following code

<br /> function testClass()<br /> {<br /> this.Msg = "Hello";<br /> this.showMsg = function()<br /> {<br /> alert(this.Msg);<br /> }<br /> }<br /> <br /> var obj = new testClass();<br /> obj.Msg = "HI";<br /> obj.showMsg();<br />

In above script if we remove obj.Msg = "HI"; we will get an alert with text Hello.


Now step by step we will start developing our JavaScript class.
1.Include JS file and write following
<br /> function AjaxClass()<br /> {<br /> this.Method = "GET";//OR "POST" <br /> this.Async = true; //OR false (asynchronous or synchronous call)<br /> this.request = null;<br /> this.init = function() <br /> {<br /> if (window.XMLHttpRequest) // if Mozilla, Safari etc<br /> this.request = new XMLHttpRequest();<br /> else if (window.ActiveXObject)<br /> { // if IE<br /> try <br /> {<br /> this.request = new ActiveXObject("Msxml2.XMLHTTP");<br /> } <br /> catch (e)<br /> {<br /> try<br /> { <br /> this.request = new ActiveXObject("Microsoft.XMLHTTP");<br /> }<br /> catch (e){}<br /> }<br /> }<br /> <br /> if(this.request)<br /> { <br /> this.request.onreadystatechange=this.handleResponse;<br /> //we will develope this.handleResponse function in step 3<br /> this.request.open(this.Method, this.url , this.Async);<br /> this.request.send(null);<br /> }<br /> } <br /> }<br />

In this step we have created XMLHTTPRequest object and simply send call to the server. By default method is GET (this.Method = "GET") and calling type is Ascynchronous (this.Async = true)

2.In this step we will develop simple logic which will allow us to dynamically call Ajax function.

For this in our above Ajax function we will add one JSON (www.json.org) object as follows.

<br /> this.JSONArray = { "Method" : "POST", //Method type<br /> "Async" : true, //Call type<br /> "CallPage" : "CallPage.aspx", //page or webservice<br /> "Querystring" : "", //Query string<br /> "dependentType" : null,//[0,1,2,3] for isEdit <br /> "isEdit": [<br /> {<br /> "textBoxId" : null, //0 then this element<br /> "dropDownId" : null, //1 then this element<br /> "default" : null, //2 then this element<br /> "misc":null //3 then this element<br /> }<br /> ]<br /> <br /> };<br />

In above script we can set the default values for all. Please reffer demo JS file to understand this better. We will use these values to set response from the server to textboxes,drop down lists,Div tags, td tags etc. Using "CallPage" : "CallPage.aspx" we can define default server page and while calling Ajax function we can reset this value to web method or to any other web page.
As we will proceed in this article we will come to know how can we change all above values and how can we use it for multiple updation.Also we will see that how to extend the class for further customization.

3.As we have seen in 1st step;

this.request.onreadystatechange=this.handleResponse;
In this step we will develop this.handleResponse function also in this function we will use JSON object defined in 2nd step.
Whenever this.handleResponse function gets call script looses the focus of this. To keep trac of this object we will assing it to some variable. i.e

<br /> var self = this; // To handle lose of focus<br />

In this function we will be able to receive data from server. Once we get the data we can play with it the way we want.
This function will take care of the responses from web services as well as from web pages.
Difference is, web service returns response in the form of XML where are response from the webpage can be defined by web developer.

The function will be as follows

<br /> var self = this; // To handle lose of focus<br /> this.handleResponse = function()<br /> {<br /> if(self.request.readyState == 4 && self.request.status == 200)<br /> {<br /> if (window.ActiveXObject) // for IE<br /> {<br /> var doc=new ActiveXObject("Microsoft.XMLDOM");<br /> doc.async="false";<br /> doc.loadXML(self.request.responseText);<br /> }<br /> // code for Mozilla, Firefox, Opera, etc.<br /> else<br /> {<br /> var parser=new DOMParser();<br /> var doc=parser.parseFromString(self.request.responseText,"text/xml");<br /> }<br /> try<br /> {<br /> var data = "";<br /> if(doc.documentElement) //Response from webservice<br /> data = doc.documentElement.childNodes[0].nodeValue;<br /> else data = self.request.responseText; //from web page<br /> //data contains response text from the server<br /> <br /> //At this point we have response from serve<br /> //so here we will write our function to //manipulate the data. We will develop it in <br /> //4th step.<br /> }<br /> catch(e) {}<br /> }<br /> } <br /> <br />

If there is any problem in understanding please go through above code again.

In the the 1st step we have

<br /> if(this.request)<br /> { <br /> this.request.onreadystatechange=this.handleResponse;<br /> this.request.open(this.Method, this.url , this.Async);<br /> this.request.send(null);<br /> }<br /> We will modify this as follows so that we can directly use JSON array which we have defined in 2nd step.<br /> if(this.request)<br /> { <br /> this.request.onreadystatechange=this.handleResponse;<br /> this.request.open(this.JSONArray.Method, this.url , this.JSONArray.Async);<br /> this.request.send(null);<br /> }<br />

While developing Ajax application take care of following point.

• URL for XMLHTTPRequest object should belong to same domain.
• Firefox and other browser doesn’t allow cross domain communication.
• IE will show warning

Thus our
<br /> this.url = “http://myDomain/mysite/" + this.JSONArray.CallPage + this.JSONArray.Querystring;<br />

e.g. "http://localhost/Demo/CallPage.aspx?"+this.JSONArray.Querystring;

Also when ever we want to call web methods like above example, we need to set following protocols under in web.config file.

<br /> <webservices><br /> <protocols><br /> <add name="HttpGet"><br /> <add name="HttpPost"><br /> </protocols><br /> </webservices><br />

4.Up to this point we have finished with development of Ajax logic which will return us response. And in this point we will develop logic for population HTML controls

In this.handleResponse (step 3) we have seen that we get response in
“data” variable in JavaScript.

So once we got response from the server we will write following logic

<br /> switch(self.JSONArray.dependentType)<br /> {<br /> case 0:<br /> PopulateControls(self.JSONArray.isEdit[0].textBoxId,data);<br /> //simple call to JS function<br /> break;<br /> case 1:<br /> PopulateControls(self.JSONArray.isEdit[0].dropDownId,data);<br /> break;<br /> }<br />

self.JSONArray.isEdit[0].textBoxId will contain id of the text box in which we have to fill the response. And data is the response from the server.
In 2nd step we have defined JSON object as follows

<br /> this.JSONArray = { "Method" : "POST", //Method type<br /> "Async" : true, //Call type<br /> "CallPage" : "CallPage.aspx", //page or webservice<br /> "Querystring" : "", //Query string<br /> "dependentType" : null,//[0,1,2,3] for isEdit <br /> "isEdit": [<br /> {<br /> "textBoxId" : null, //0 then this element<br /> "dropDownId" : null, //1 then this element<br /> "default" : null, //2 then this element<br /> "misc":null //3 then this element<br /> }<br /> ]<br /> <br /> };<br />

And in our above switch we have simply used the elements of JSON object

At this point we will see how to call our Ajax Class, how to initiate the request and how to set Elements of our JSON object.
Simply create object of our AjaxClass().

<br /> var obj = new AjaxClass(); //Object creation<br /> obj.JSONArray.Method = "GET"; //Setting Method <br /> obj.JSONArray.isEdit[0].textBoxId="txt1";//Textboxid for response<br /> obj.JSONArray.dependentType=0;//0->Textbox,1->drop downlist,<br /> //2->tagId,3->Misc and so on<br /> obj.init();//Initiate the AjaxCall<br />

if obj.JSONArray.dependentType=1 then our switch case will not work for text box, but it will work for dropdown list (check above switch case). Means we will have to set dropdown list of JSON object.

<br /> obj.JSONArray.isEdit[0].dropDownId="ddl1";<br />

and so on, we can define our own set of HTML controls to be filled.

In the same way we can change all default settings in JSON object of that class.
e.g. obj.JSONArray.Method = "GET";
obj.JSONArray.CallPage = "Mywebservice/webMethod";
obj.JSONArray.Querystring= "My querystring";

For this URL will be

<br /> this.url = this.url + this.JSONArray.CallPage + this.JSONArray.Querystring ; <br /> //Check this.init = function() of XMLHTTPJSClass.Js in democode.<br />

In case of web service we will have to set CallPage element in the same way we did in above example.

Now for multiple textboxes simple trick,
obj.JSONArray.isEdit[0].textBoxId="txt1$txt2$txtn";//$ is a delimiter
While sending data from server send it with the same delimiter,in such a way when we split obj.JSONArray.isEdit[0].textBoxId and response data on $; we will get one to one data and textBoxId.

Now we can have different types like “txtbox(es) + drop down list(s) + div” in such case we can use "misc" option of isEdit element of JSON object.
And we can define our PopulateControls function the way we want.

Just think of the choices for getting Response from AjaxCall; we can develop very critical systems using this logic and keeping code as simple as possible. Also we can integrate our ICallback logic for large data transfer.



Demo JavaScript file is as below ( DOWNLOAD)

<br /> // JScript File<br /> //var request;<br /> <br /> function AjaxClass()<br /> {<br /> this.JSONArray = { "Method" : "GET", //Method type; For webservice user GET method only.<br /> "Async" : true, //Call type<br /> "CallPage" : "", //Calling page or webservice<br /> "Querystring" : "", //Query string<br /> "dependentType" : null,//[0,1,2,3] for isEdit <br /> "isEdit": [<br /> {<br /> "textBoxId" : null, //0 then this data<br /> "dropDownId" : null, //1 then this data<br /> "tagId" : null, //2 then this data<br /> "misc":null //3 then this data<br /> }<br /> ]<br /> <br /> };<br /> <br /> this.Method = this.JSONArray.Method;//"POST";<br /> this.url = "http://localhost:2849/XMLHTTPJSClassExt"; <br /> this.Async = this.JSONArray.Async//"true";<br /> this.textBox = this.JSONArray.textBox;//true;<br /> this.request = null;<br /> var self = this; // To handle lose of focus<br /> this.handleResponse = function()<br /> {<br /> if(self.request.readyState == 4 && self.request.status == 200)<br /> {<br /> if (window.ActiveXObject) // for IE<br /> {<br /> var doc=new ActiveXObject("Microsoft.XMLDOM");<br /> doc.async="false";<br /> doc.loadXML(self.request.responseText);<br /> }<br /> // code for Mozilla, Firefox, Opera, etc.<br /> else<br /> {<br /> var parser=new DOMParser();<br /> var doc=parser.parseFromString(self.request.responseText,"text/xml");<br /> }<br /> try<br /> {<br /> var data = "";<br /> if(doc.documentElement) data = doc.documentElement.childNodes[0].nodeValue;<br /> else data = self.request.responseText;<br /> <br /> //Logic for Poputating the HtmlControl<br /> switch(self.JSONArray.dependentType)<br /> {<br /> case 0:<br /> PopulateControls(self.JSONArray.isEdit[0].textBoxId,data);<br /> break;<br /> case 1:<br /> break;<br /> case 2:<br /> window.document.getElementById(self.JSONArray.isEdit[0].tagId).innerHTML = data;<br /> break;<br /> }<br /> }<br /> catch(e) {}<br /> }<br /> } <br /> <br /> this.init = function() {<br /> this.url = this.url + this.JSONArray.CallPage + this.JSONArray.Querystring ; //WebService.asmx/HelloWorld";<br /> if (window.XMLHttpRequest) // if Mozilla, Safari etc<br /> this.request = new XMLHttpRequest();<br /> else if (window.ActiveXObject)<br /> { // if IE<br /> try <br /> {<br /> this.request = new ActiveXObject("Msxml2.XMLHTTP");<br /> } <br /> catch (e)<br /> {<br /> try<br /> { <br /> this.request = new ActiveXObject("Microsoft.XMLHTTP");<br /> }<br /> catch (e){}<br /> }<br /> }<br /> <br /> if(this.request)<br /> { <br /> this.request.onreadystatechange=this.handleResponse;<br /> this.request.open(this.Method, this.url , this.Async);<br /> this.request.send(null);<br /> } <br /> } <br /> }<br /> <br /> <br /> function PopulateControls(ids,values)<br /> {<br /> // Split ids and Split values on $ for multiple Fillins<br /> var idArr = ids.split('$');<br /> var dataArr = values.split('$');<br /> if(idArr.length == dataArr.length)<br /> {<br /> for(var i = 0 ; i < idArr.length ; i++) { window.document.getElementById(idArr[i]).value = dataArr[i]; } } } // function testClass() // { // this.Msg = "Hello"; // this.showMsg = function() // { // alert(this.Msg); // } // } // // var a = new testClass(); // a.Msg = "HI"; // a.showMsg();

Download Demo Code here --> XMLHTTPJSClass.zip

Read more...

CSS- Bubble Tool Tip

Share |

Very simple to use bubble tool tip, easy to implement.
I got this code some time back, during my initial phase of web development.

In the body tag put following code

<br /> <div id="container"><br /> <h1>CSS Bubble Tooltips</h1><br /> <p>This id demo <a href="#" class="tt">hover here!<span class="tooltip"><span class="top"></span><span class="middle">This is the Demo Tool tip... enjoy</span><span class="bottom"></span></span></a>. This is just a demo code...</p><br /> </div><br />


This code is very easy to understand, check style tag and download following images and change the paths accordingly in style tag.

Download Demo Code here --> Bubble Note.zip

Read more...

Ajax-Handle complex data type (e.g. Class)

Share |

Use of complex data types in Ajax programming is a tricky part. In normal scenario we need to communicate between client and server via string manipulation only. (Demo Code)
In this article we will discuss about, Microsoft Ajax and the way we can handle complex data types. We shall use web service for Ajax communication; web service will be exposed to client using Script Manager. Complex data types can be handled using JSON objects, in this article we will discuss only about how to handle complex data types. Script Manager internally uses JSON serialization class for handling complex data types; so will not care about the JSON about in this article.

Let’s assume we have a Public class Employee as below.


<br /> public class Employee<br /> {<br /> public string name = string.Empty;<br /> public string Address = string.Empty;<br /> public string City = string.Empty;<br /> public string zip = string.Empty;<br /> public string [] phoneNumbers = null;<br /> <br /> public Employee()<br /> { <br /> <br /> }<br /> public Employee(string Name,string Address, string City, string zip, string [] phoneNumber)<br /> {<br /> this.Address = Address;<br /> this.City = City;<br /> this.name = Name;<br /> this.zip = zip;<br /> this.phoneNumbers = new string [phoneNumber.Length];<br /> this.phoneNumbers = phoneNumber;<br /> }<br /> public string setValues()<br /> { <br /> string _name = this.name;<br /> string _Address = this.Address;<br /> string _City = this.City;<br /> string _zip = this.zip;<br /> string[] _phoneNumbers = new string[this.phoneNumbers.Length];<br /> _phoneNumbers = this.phoneNumbers;<br /> return "SUCCESS";<br /> <br /> //Write your logic for setting values.<br /> }<br /> }<br />

In above class the elements which we need to be accessed in JavaScript are public; here we are not considering any function in a class.

Again we are going to expose a web service to Script Manager for this article. So we also have a web service in demo code it is “WebService.asmx”.
Following two namespaces are required to make a web service Ajax Enabled. We will not go into any details of these namespaces.
using System.Web.Script.Services;
using System.Web.Script.Serialization;
Our web service class is as below



<br /> [WebService(Namespace = "http://tempuri.org/")]<br /> [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]<br /> [GenerateScriptType(typeof(Employee))]<br /> [ScriptService]<br /> public class WebService : System.Web.Services.WebService<br /> {<br /> <br /> public WebService()<br /> {<br /> <br /> //Uncomment the following line if using designed components <br /> //InitializeComponent(); <br /> }<br /> <br /> [WebMethod]<br /> public string setValues(Employee emp)<br /> {<br /> return emp.setValues(); <br /> }<br /> <br /> [WebMethod]<br /> public Employee getDefaultData()<br /> {<br /> string[] PhnNum = { "123","222","234" };<br /> Employee Emp = new Employee("Default Name","Default Address","Default City","Default Zip",PhnNum);<br /> return Emp;<br /> }<br /> }<br />

Following are the two extra things we have added above the WebService class, this is to indicate that the web service will be called from JavaScript, and is enabled of Creating corrosponding script object of class Employee.



<br /> [GenerateScriptType(typeof(Employee))]<br /> [ScriptService]<br />

In the Demo, Employee and WebService both classes are added under namespace Demo, and are in the same file “webservice.asmx”.
Our server side code ends here. Now we shall develop only client side code.
Our form tag is as follow


<br /> <form id="form1" runat="server"><br /> <asp:scriptmanager id="ScriptManager1" runat="server"><br /> <scripts><br /> <asp:scriptreference path="JScript.js"><br /> </scripts><br /> <services><br /> <asp:servicereference path="WebService.asmx"><br /> </services><br /> </asp:ScriptManager><br /> <br /> <br /> Deal with Complex Data Types<br /> <br /> <br /> <br /> <div><br /> <table border="1" cellpadding="0" cellspacing="0" style="width: 730px; height: 74px"><tr> <th align="left">Employee Name</th> <th align="left">Address1</th> <th align="left">City</th> <th align="left">Pin Code</th> <th align="left">Phone Number (seperate by ',')</th> </tr> <tr> <td align="left"><br /> <input type="text" id="txtEmpName"><br /> </td> <td align="left"><br /> <input type="text" id="txtAddress"><br /> </td> <td align="left"><br /> <input type="text" id="txtCity"><br /> </td> <td align="left"><br /> <input type="text" id="txtZipCode"><br /> </td> <td align="left"><br /> <input type="text" id="txtPhnNumber"><br /> </td> </tr> </table><br /> </div><br /> <br /> <br /> <input type="button" id="btnDefaultData" value="Get Default Data" onclick="_getDefaultData()"><br /> <input type="button" id="btnCallServer" value="Call Server" onclick="_sendDataToServer();"><br /> </form><br />

In above code, we have used script manganer and registred our web service and JavaScript file.
Here onwards we are going to deveolp JavaScript
Calling of WebService methods using JavaScript and script manager is very simple, we just need to use the simple namaspace sequence.
e.g. If we want to call getDefaultData function of a webservice we simply needs
Demo.WebService.getDefaultData().
If we want to add a response handler we just need to specify the function name in bracess like Demo.WebService.getDefaultData(OnSucceeded)
For the demo purpose our JavaScript contains mainly three functions

_getDefaultData() – This JavaScript function is used to call a webmethod getDefaultData. This Web Method returns default data Set for the Employee class.
The JS function is as below



<br /> function _getDefaultData()<br /> {<br /> // This function gets default data from server.<br /> Demo.WebService.getDefaultData(OnSucceeded)<br /> }<br />

_sendDataToServer() – This JavaScript function is used to pass client side input to the server, or to the web method.
The JS function is as below



<br /> function _sendDataToServer() <br /> {<br /> <br /> // Create an instance of the Server side employee class.<br /> var obj = new Demo.Employee();<br /> obj.name = window.document.getElementById('txtEmpName').value;<br /> obj.Address = window.document.getElementById('txtAddress').value; <br /> obj.City = window.document.getElementById('txtCity').value;<br /> obj.zip = window.document.getElementById('txtZipCode').value;<br /> obj.phoneNumbers = window.document.getElementById('txtPhnNumber').value.split(',');<br /> <br /> // Call the Web service method to send Client side values.<br /> Demo.WebService.setValues(obj, OnSucceeded); <br /> }<br />

IN ABOVE FUNCTION CHECK THE WAY WE HAVE CREATED OBJECT OF AN EMPLOYEE CLASS. THIS EMPLOYEE CLASS EXISTS IN C# CODE, BUT USING AJAX.NET WE ARE ABLE TO CREATE INSTANCE ON CLIENT SIDE AS WELL.

OnSucceeded(result,userContext, methodName) – This JavaScript function is used to Handle response from the server. The function is as below



<br /> // This is the callback function that <br /> // processes the complex type returned <br /> // by the Web service.<br /> function OnSucceeded(result,userContext, methodName)<br /> {<br /> if(methodName == "getDefaultData")<br /> {<br /> window.document.getElementById('txtEmpName').value = result.name;<br /> window.document.getElementById('txtAddress').value = result.Address; <br /> window.document.getElementById('txtCity').value = result.City;<br /> window.document.getElementById('txtZipCode').value = result.zip;<br /> var phnNum = null;<br /> for(var j = 0 ; j < j ="="" phnnum =" result.phoneNumbers[j];" phnnum =" phnNum" value =" phnNum;">

Download Demo Code here ---> DealingWith_ComplexTypes.zip

Read more...

Get Direct HTML string for Server Side Control - Useful for Ajax Operations

Share |

How to get rendered HTML of any control for Ajax operations?
In ajax on client, what exactly we do is the simple manipulation of strings. Mainly we can use HTML strings and put it as innerHTML in desired tag (i.e. div,span,td, etc…).
Assume following sequence of operations
1. Send an Ajax request from client to server.
2. On server side we are binding data table to grid
3. Convert the grid into HTML string and send it back to client side.
4. On client side put that string as an innerHTML of desired tag.

Now to convert grid into HTML is a logical thing to develop, but in ASP.NET following code will generate HTML string of any control… This is a simple rendering of any control…
We will use one of the best feature of Asp.Net i.e. RenderControl.
Using this property of control we are able to get HTML of that control., but for this we will have to use HtmlTextWriter and StringWriter as follows

e.g.


<br /> _grid.DataSource = _sampleData;<br /> _grid.DataBind();<br /> <br /> using (StringWriter sw = new StringWriter())<br /> {<br /> HtmlTextWriter htw = new HtmlTextWriter(sw);<br /> _grid.RenderControl(htw);<br /> htw.Flush();<br /> string result = sw.ToString();<br /> }<br />

Here result will contain HTML format of the grid control. We will convert grid control to HTML after binding the data.

Read more...

Pop up window

Share |

To open new window we need to use following JavaScript function

<br /> window.open('url to open','window name','attribute1,attribute2') <br />

This function allows us to open a new browser window for the viewer to use; all the attributes are separated by commas

Window Attributes

Below is a list of the attributes you can use:

1. width=300
Use this to define the width of the new window.

2. height=200
Use this to define the height of the new window.

3. resizable=yes or no
Use this to control whether or not you want the user to be able to resize the window.

4. scrollbars=yes or no
This lets you decide whether or not to have scrollbars on the window.

5. toolbar=yes or no
Whether or not the new window should have the browser navigation bar at the top (The back, foward, stop buttons..etc.).

6. location=yes or no
Whether or not you wish to show the location box with the current url (The place to type http://address).

7. directories=yes or no
Whether or not the window should show the extra buttons. (what's cool, personal buttons, etc...).

8. status=yes or no
Whether or not to show the window status bar at the bottom of the window.

9. menubar=yes or no
Whether or not to show the menus at the top of the window (File, Edit, etc...).

10. copyhistory=yes or no
Whether or not to copy the old browser window's history list to the new window.

Read more...