Thursday, November 19, 2009

Friday, May 15, 2009

Pop up window

This post is moved to


Asp Dot Net Matters Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Monday, May 11, 2009

Preload Image - Show Loading Image

To show Loading Image while web page is being load. Simple Javascript is required for it. Just check following JavaScript, you can use it directly... Just replace elementId.

Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Saturday, April 11, 2009

Write an Image in Iframe(Currently IE only)

This is something different I came across, some months back.
We can actually write an Image file in Iframe,this file is visible, but user can't save the file.
This is very simple trick which we can actually use to avoid image copying.
e.g. Though communities like orkut prohibited right click on an image, we can simple drag the image in address bar and can save it. This is something which we can't avoid in normal scenario, but there is one way to deal with this, using ASP.NET and it's handler concept.
I have already talked about ashx file in one of my previous article on image handling

Lets go step by step

Step 1
Create one file names Image.ashx
copy paste following code



save file, check the assignment of string names "img" in above code.

step 2

In aspx file generally add an Iframe as below



step 3
Add followin javascript function



step 4
On body 'onload' event call above function as



Run your code, make sure that you assign correct Image in Image.ashx file.
Now if you run your code you can get an image in iframe which can't be saved Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Monday, March 9, 2009

Ajaxified Grid 2

Ajax enabled grid using ICallbackEventHandler
In my previous article of “Ajax enabled grid using ICallbackEventHandler”, we have discussed about following operations

1.Sort the grid in ascending or in descending order by clicking on the arrows next to column name.
2.Change pages of the grid.
3.Change page length of the gird

In this article we will discuss about editing the grid, i.e. just double click on the grid cell and the cell become editable. Change the content of the cell and click on Update button. This will update server side data without refreshing the page.
Best features of this grid are as follows

Data will be bind to grid only once, i.e. on page load.
Only modified data goes to server and update the Data.

Logic for Grid Update : We can see grid and Data table as two dimensional array. User will update any cell i.e. row[i][j] this is like playing with two dimensional array in learing phase of programming; update cell row[i][j] in grid and the onclick of update button Update datable or other two dimensional array.

The basic UI will contain one grid and one update button. Will bind data to grid on page load

1.Simply copy paste following code in the tag of the page



We have activated RowDataBound event of the grid.


2.We will maintain a datatable, so that we can avoid fetching data from database. This is only to make understanding more simpler. We will assume that we have datatable and we define get and set properties for the table as follows.



We can write a function which will return data table, and the get property will simply return that table. This time we have used session variable instead of Viewstate to store the table; because we need to update data on server side, if we use viewstate , to update it we need to do post back of the page.

To use this table we will simply say “_grid.DataSource = _sampleData;”
And to set new data table we will say _sampleData = _tempTable;

Here _tempTable is the updated table after updating the grid on client side.

3.We will follow typical ICallbackEventHandler procedure and add folloing points on server side page, i.e. in c# code.

Implement ICallbackEventHandler interface

public partial class Default : System.Web.UI.Page , ICallbackEventHandler

Write RaiseCallbackEvent(string eventArgument) and GetCallbackResult()

Which will be as follows



result is a global variable declared on the page.
We are following the same conversions in RaiseCallbackEvent(string eventArgument) which we have used in my last article

4.To make cell editable on double click we need to add javascript which will convert the cell in to textbox or in dropdownlist in such way that we can keep track of each updated cell.
As we have discussed earlier; we will look at the grid as a two dimentional array. Thus we will maintain unique id for each cell; in such a way that cell id will tell position of that perticular cell data in data table.

Here understand that grid data is exact copy of the data table so row[i][j] in data table will match with row[i][j] of grid, unless we define our own order for binding the data to grid.

5.In step 1 we have activated RowDataBound event of the grid. In this step we will write code for RowDataBound event.
Define _rowNumber as global variable for same page.



To make cell editable we have added


MakeCellEditable(this) will write this JavaScript function in next step.

To identify each cell as unique cell and to mach it with corrosponding datatable entry, we will give id to each cell in such a way that it will follow row[i][j] structure.
i.e.


And we are increasing row number each time. Observe the way we have given id, we will get [i][j] position just by spliting the is on “_”.

6.To make cell editable we will write following function in JavaScript




This function will convert the cell into text box and set focus in that text box. Check the way we have assinged id to the text box; i.e.[i]_[j]_input obj is the cell, read step 5

7.Upto point 6 we are able to make cell editable; now we need to write a code which will pick all updated values and send them to server to update the datatable.
On click of update button we have called one javascript function ( reffer step 1), named UpdateTable().
We will write this JavaScript function



Please reffer step 1 for 'Gridview','input' and UpdateGrid('updateTable$'+data);
data = textboxId|textboxData~textboxId|textboxData
data is string of modified data along with their textbox id.

8.UpdateGrid function will call RaiseCallbackEvent(string eventArgument) on server side.

Reffer step 3 where we have defined RaiseCallbackEvent(string eventArgument) and GetCallbackResult(). In step 3 we will observe

if (args[0] == "updateTable") updateTable(args[1]); also observer last 3-4 lines of step 7
On server side updateTable is a function; which is responsible for updateing the Datatable. The function will be as follows.




In step 7 we have seen the javascript function JSUpdateTable()
And how we are sending updated data in the format of string.
For further understanding lets assume that we are getting data to server side and
_data = “0_1_input|ABC~3_3_input|XYZ” , this is how we send data from client to

Now in above function just observe how we will manipulate _data. Here understanding of each step is important so for this we can check the demo code and debug it.

result = "SUCCESS"; result is a global string.
After updating DataTable on server side we will send result to client, and if result = "SUCCESS" we will come to know that datatable has been updated successfully.

After this GetCallbackResult() function (ref. point 3) will send result string to client.

9.On client side we need one function which will automatically get called. In step one we have registered following function



(Please reffer my "Ajaxified Grid 1" articles if you are not getting what this function means)

ShowResult JavaScript function will get called automatically after this GetCallbackResult(), so now we will write this function.




Above function is used only remove editable cells, i.e. to remove textboxes and to indicate that the server data has been updated.

10.On page load bind the grid



For editing the grid some points need to be considered; we have discussed only about text box, in the same way we can go for dropdown list, Text Areas etc. Possibilities are many.
But while updating the grid if we are using pagging and sorting then to update the corresponding row in data table is a problem. In this case we will add one column in the data table in which corresponds to table row, so if we can sort the table and can still maintain the row number i.e [i] in row[i][j].And this column will be hidden so that we can use it for adding and deleting the the data also.
Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Monday, February 16, 2009

Data Table to JSON Array

This Post Has been moved to --> ASP DOT NET MATTERS Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

About JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is built on two structures:

* A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
* An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

Kindly click on following link for more information. I find JSON much more useful for Ajax operations since parsing is easy like an XML.

check it : http://json.org/ Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Saturday, February 14, 2009

Ajaxified Grid 1

Use of ICallbackEventHandler may not be the good option to make grid Ajax enabled

In this post I will discuss following

  1. Sort the grid in ascending or in descending order by clicking on the arrows next to column name.
  2. Change pages of the grid.
  3. Change page length of the gird

We will used RenderControl function to get HTML.

Using this function 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.




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


We will start developing the UI and code in following steps

Simply copy paste following code in the tag of the page




In above code we are just creating one grid and one dropdownlist.

You can switch to Design view to see it.

We have activated RowDataBound event of the grid.


Now we will create a DataTable to be used as DataSource to grid.





To use this table we will simply say “_grid.DataSource = _sampleData;”


We will write following four functions for grid operations




Name of the above functions indicate their functionality. Second parameter of the first three functions is “pageLength” this is the value of the dropdown list

I.e.




Result string is declared on top of the page so that all members of the page can access it “string result = string.Empty;”. Check it in the demo code.


If there is any confusion please again go through above pages.

We need four functions for ICallBackEventHandler two are JavaScript functions one for Callback to server and another for displaying response data from server.

And two are Server side functions (RaiseCallbackEvent(string eventArgument) and GetCallbackResult())


JavaScript functions are as follows



When we want to do Callback, we are actually firing an event which is related to WEBFORM. So we will have to put UpdateGrid(args) function in tag. Otherwise we will get JavaScript error.
Since we can register this function by using “Page.ClientScript.RegisterClientScriptBlock” If we register above function using this that function will appear in tag only.


This function will be fired after server sends response back to client, thus this function will manipulate server response. We have simply put the response as innerHTML of the Div tag. This innerHTML contains HTML format of the updated grid.


Server-Side functions are as follows



This function simply returns the result which we have put as innerHTML in ShowResult function (Refer previouse point)




In this function eventArgument will appear as “changePage$1$10” or “sort$1$10” or “changePageLength$1$10” or “sort$Contact Name Asc$10” or “sort$Contact Name Desc$10”

If we split this on “$”, we will get

- Action .
- Page index of the Grid.
- Page size from the dropdown list (i.e. id is ‘ddl’).

(In changePageLength we don’t need args[2]; I have kept is just to makecoding little simple)

In RaiseCallbackEvent we have simply called the function which we have decleared in POINT 3, each function in point 3 will do the respective action and return a HTML string of the Grid.

Add following code protected void Page_Load(object sender, EventArgs e)



[At this point if we compile the code we will able to chage the page length ]


Now we will write code in the RowDataBound event of the Grid.. I.e. in protected void _grid_RowDataBound(object sender, GridViewRowEventArgs e)


For adding columnwise sorting functionality in grid, we will modify columnheader row of the grid.



We have added Up and down images and onclick of either of them we have called UpdateGrid function (Ref. Point 4) , for sorting Ascending and Descending order repectively. [At this point you can complie the code and the grid will be Sortable].


After this we will modify the Pager row in such a way that we can use it to change the page index of the grid using UpdateGrid function.(Ref. point 4 public void RaiseCallbackEvent)




_pageCount contains the pagecount of the grid. We have to display pages as Numbers so we used HyperLink and Label to add space after each page number. We can choose our own way to display pages, just we will have to take care of adding the attribute of JavaScript.


And now we have created an Ajax enabled grid using ICallbackEventHandler.

(Don’t forget to Add ICallbackEventHandler). Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Thursday, February 12, 2009

get HTML - of serverside control for Ajax handling

This post is moved to 

ASP DOT NET MATTERS

Click on Above Link to Get Redirect to Desired Page.

Direct Blog address : http://www.aspdotnetmatters.blogspot.com Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Monday, February 2, 2009

Ajax-Handle complex data type

This Post is Moved to 

Asp Dot Net Matters


Click on Above like to redirect to Desired page.

Check blog: http://www.aspdotnetmatters.blogspot.com Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Saturday, January 31, 2009

XMLHTTP class

This post is Move to ASP DOT NET MATTERS

Direct link : http://aspdotnetmatters.blogspot.com/2010/07/xmlhttpjsclass-json-class-for-ajax.html


For More Details check http://aspdotnetmatters.blogspot.com Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

CSS- Bubble Tooltip

This Post is Moved to


ASP DOT NET MATTERS

http://www.aspdotnetmatters.blogspot.com Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Friday, January 30, 2009

Partial Page Rendering

Partial page rendering is one of the very amazing concepts by Microsoft Ajax extension. In this article we will discuss one very common and real time scenario for which Partial page rendering is very useful. Whenever there is need to render a server side control for Ajax web application, partial page rendering is very good option.

For example, in my ICallback articles we have discussed about the Ajaxifying the grid view; but consider following scenario,
Grid view contains details of the all employees of an organization, and then in that case employees are categories in various ways,
  • Depending on the role of an employee.
  • Depending on the CTC of an employee.
  • Depending on the City of an employee.
  • Depending on the Department of an employee.

And many more, then in such case if we are using same Gridview to display all employees, and along with it, we need to provide an instant update mechanism in the grid; but for each category of employee, details which need to be edited are different and may contain information which is not part of the grid, grid is containing only common information.

Partial page rendering is a very good option for such case; we don’t need to handle anything on client side other than managing partial rendering calls. For this we will use Microsoft Ajax extension, i.e. Update Panel, Update progress and script manager.
Now if we are going to user different web user controls for different purposes then this approach is more effective.

We will consider following case:
  • We have main page which contains a grid.
  • On click of edit image in grid column, user should be able to edit the details of that particular employee.
  • Depending on the employee id, display information to edit.
  • This may contain more than one table to fetch and update the data.
  • To make it more modular use Web user controls for data update.

To avoid database dependency we will use Data Tables as properties, and will use sessions to maintain different data tables.

Steps for the code development are as follows.
  1. Design a Grid View the way we want it to be displayed.
  2. Develop user controls to handle various types of users, and make sure all of them work fine. Here we can keep the login on the same page.
  3. Add an update panel in the Design, this update panel contains all required user controls in different Panels and web user controls; visibility of each panel and web user control is set to false.
  4. Add one server side Button on which we will update the update panel, add this button as a trigger for update panel.
  5. On click event of the button contains code to handle update events.

Develop Aspx Page

Form tag of aspx page will be as below


btnClick is set hidden using Style .
In above logic we have added Triggers for update panel, there can be more than one trigger for the update panel. These triggers are responsible to send Post back of update panel, i.e. Partial page will go to server side, and server will render only the contents inside the Update panel. asp:AsyncPostBackTrigger represents asynchrous post back.



We are going to write server side code on the click event of above button, and changes will reflect in update panel. So if we have more than one trigger for an update panel, we can handle different events very much effectively. Also if our update panel contains some user control or some button to update server side data, it gets updated asynchronously , for that we don’t need to put extra code.
E.g. if we have a web user control in Update panel, and that update panel contains, some server side buttons, click event of all such elements get handled automatically.

In the demo code we have used one static class, which has public static table; this is used just to avoid database connection.
We have following tables in the static class.
1. DT – General table containing general (Common) information about the Employees
2. Manager – Table containing information about the employees who are managers.
3. TeamLeader – Table contains information about the employees who are Team leader.

In Demo code we have a GridView which contains common information about employees. Thus on page load we have following code.




Our girdview on aspx is



Now onclick of Image1 we need to fire trigger of an update panel i.e. click event of btnClick. So onlick of Image1 we have to do following tasks
Set the employee id in hdnValue, this field is part of an update panel,thus we can read it’s value on server side, for partial page rendering. And call click event of btnClick.
For this we use server side GridView1_RowDataBound event.



So on click of Image1 in grid, we will fire AsyncPostBack to server. In above code check img.ID = e.Row.Cells[1].Text; this line of code will append empId for DT, to the image id so that we can assing the image id to hiddenField on client side. If we split the img.ID on client side on “_”, the last element of an array will be EmpId.
Check the schema of DT for this.

Up to this point we are able to send Asynchronous Post back request to server; after this we will develop logic to change the contents in Update panel, for the understanding purpose, we will only hide and show the controls in update panel and fetch employee data from table and display it in controls. Further we can make it more and more complex depending on the requirement.

In code Update panel contains one Panel and Two web user control, panel will take care of an employee who is manager and web user controls are used for other types of employees.

btnClick ‘s server side click event is used to hide and show the data.



This panel contains Update button, update details is handled totally on serverside.
This is how we will handle Page events of page. Now in click_Click event, TeamLeader1 is an instance of TeamLeader web usercontrol in UpdatePanel. TeamLeader web user control contains all server side logic to update the details of TeamLeader. To access value of hidden field of parent page we will use following line in page load event of web user control.



We have handled all update and retrive events on server side, upto this we have used javascript just to set the value of hidden field.

Now we will discuss about



Script manager is required to execute Asynchronous Post back, whenever we use Update Panel we need Scrpt manger, Scriptmanager is also used to add script refrences as above.

We can handle various client side events related to Partial Postback and Update panels, some of them we have used in Jscript.js file.


PageLoad is one such event in which we can initialize some functions and assign client side events. Page load event is as below, events which can be used, but not required for this demo are commented in the Jscript files. There are many such events Microsoft has provided.

PageLoad() event is as below



OnBeginRequest and OnEndRequest are functions which get called on perticular event. Here we haved used them to display a Processing Div tag, irrespective of update panel.
Update Process is one of the control provided by Microsoft Ajax1.0, which does the same thing but we need it to associate with UpdatePanel., we are not going into details, of it.



z-index of this div tag is set very high so that whenever it is visible, it will be above all objects of the page.
Just check JavaScript used for it.



Now this div tag will be visible when ever partial page render request goes to server, whether request is because of elements inside the update panel or out side the update panel. Many times such approch is useful, because , we might use partial page renderring many times on the page, with more than one update panel also.

args contains arguments, please debug the JavaScipt using breakpoint,just like c#.net, and check the atributes. There are many useful attributes, we can make use of.


Conclusion of this article
Many times it is useful to develop code using concept of partial page rendering, which can excel the development time, and managing code becomes more easy, no need to write extra JavaScript to handle Ajax requests.
Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Thursday, January 29, 2009

ICallback Event handler

This Post is Moved to

ASP DOT NET MATTERS Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Wednesday, January 28, 2009

PageMethod

This Post is Moved TO

ASP DOT NET MATTERS

Direct Demo Code Links--> PageMethods.zip 

http://aspdotnetmatters.blogspot.com Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Ajax- Image Handling

Ajax like image display. This is a very simple way to display images, and slid the images using generic handlers provided by Asp.Net 2005.

Very simple way to handle images and change images according to user input. This is not exact ajax, but we can use query string to change the image.

We are going to use generic handlers or .ashx file to display image, and change the image simply changing the query string of the ashx file.

This article will be a kick start for the creating web based photo album applications.


We will use Html Image Tag as follows



In the source of image, instead of giving image URL we are giving, URL of ashx file.


Our HTML code for form tag is as follows



In above HTML code , we have one div tag with id “imageShow”, on mouse over event of “Image1” we will display original full size image in this div tag.


Hidden field named “hdnId” is used to maintain the id in query string to ASHX file.


We also have following JavaScript function on main page to change the query string of the image source.



At this point our client side code is done.


Now following is our serverside code written in ashx file.

Ashx is a generic handler, we can use it if there is no need to run any server side page event.



We have to set the contentType for binary stream, since we are writing data as a stream.


This is very simple to implement, we can develop complex image album web application using this logic. One Ashx page will be enough to handle many requests.
Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Monday, January 26, 2009

This article is for those who are new to Ajax

This article is for those who are new to Ajax. Ajax stands for Asynchronous Java And Xml. Ajax is the great solution for the new age of web applications, it simply helps developer to increase the performance of the site along with the more user interactive UI. Since web page is not getting refreshed each time, it is more users friendly.

The idea is; if page size is 500kb and only 10kb of data is to be updated, then if web application sending and receiving only 10kb data to and from server make more sense, than refreshing whole page. Also the request to server is asynchronously so that user can continue with the work instead of waiting for the response from the server.

It really works fast a very good web experience, in old days of the web development each time user is suppose to wait for the whole page to get refreshed, not a good idea.

Start with AJAX :
Ajax actually works because of the XMLHttpRequest object. Using this object web application can communicate with the server, i.e. either web service or the webpage. In this case web service or webpage will send required data to client page and then on client side using Java script corresponding field can be update.

You can create XMLHttpRequest object as follows:




“request” is the XMLHttpRequest object in above code. (Code is in JavaScript )

Next step after this is to open the object connection and send the request
Open method looks like

XMLHttpRequest.open(method, url, in boolean async, [user, password])
i.e.
request.open('GET', url+parameter, true)
request.send(null)
(Here we are not going to use user and password)
but before this, we need to specify the function which will take care of the data return from the server. i.e. once we send request to the server using XMLHttpRequest object and once response comes from the server which function will handle it.
Before sending the request we will specify the action; for this XMLHttpRequest object posses one event called as onreadystatechange. On this event we can specify which function should be called on each ready state change.
Now before this will understand which are the states XMLHttpRequest object supports.


Ready state valueDescription
0Represents an uninitialized state in which XMLHttpRequest object is created; and not initialized
1Open() method has been successfully called
2Sent () : request has been sent to the server.
3Represent "receiving" state in which the HTTP response headers have been received; message body has not yet been completely received.
4Loaded, data transfer has been completed.


So the above code will change to





Now we will develop a web application in which user will select the value in the combo box and on selection of the value dependent textbox will be filled. In this case on change event of the combo will be used to fire an Ajax request to the server and server in turns will send a response to the client. (Coding is done in asp.net 2.0)

1.Create a web application design a combo box and text box as follows





2.And in code behind add attribute to “InputList” i.e. to combo box.

"callToServer(this.value)" is the javascript function, this function will accept the selected value and send request to the server; using XMLHttpRequest object.

3.Now add one webservice in the same project. Also add following prototypes in web.config file.

Add above code in tab. This is required to communicate with webservice over http.

4.Now write one webmethod in the webservice. i.e.

We will call this webMethod in our Ajax call.

5.After this, will write a JavaScript function "callToServer(this.value)" . This function will be called on onchange event of dropdown list (Ref point 1).

If you observe the url it is the url of the webserivce in the same project.
Here we have to use url which is under the same domain, Firefox doesn’t allow cross refrence, and IE give warning (i.e. IE 6).

Means
var url = "http://domain1/WebSite/webservice.asmx/sendMessage?str="+val;
this will give warning in the IE 6 but Firefox will not allow you to access this webservice.


In the above function check request.onreadystatechange=handleResponse;
Here if you obsever onreadystatechange on function named handleResponse is called. So in the next step we will have to write a function which will handle the response from the server.


6.handleResponse function will be as follows

Since the response is from webservice and it is in the xmlformat, we have to use parser to parse the data. If you want to see what is the response from the server add alert(request.responseText) in the above code after 1st if condition.

window.document.getElementById('DependentOutput').value = data; this line will fill the textbox with the response from the server.


This how we can create Ajax application, it’s very simple and easy. Once you understand this concept, you can modify the code and make it more complex as per your requirements. Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

blogger templates 3 columns | Make Money Online