What is ezAjax?

ezAjax is a jQuery plug-in which helps you send part of a page using Ajax to a web service in both JSON/JSON and Query/XML format. This plug-in is specially designed for working under ASP.NET framework where programmers can not have more than one form but do need to send only part of it to server and also wont like to use Ajax Panels.

This plug-in can automatically find and send FCKEditor controls along with the Ajax Data which comes to be very useful once you are developing for DotNetNuke.

It uses and follows the standard jQuery.Ajax method, however it will automatically find the fields within the selector and create Query or JSON data based on their id and value.

It supports:

  • All input elements.
  • Selections and Checkboxes
  • Lists and Dropdowns
  • Text Area
  • FCKEditor
  • HTML and Web Controls

How to use ezAjax?

Using ezAjax is as easy as any other jQuery plug-in. You just need to download and link the javascript file in your page and start using the methods.

Of course you need a Web Service to handle things on the server side. By default ASP.NET uses Query/XML model which is very good for complex data forms but in case you are going to use a simple ,quick and light weight way of communication with your server you definitely need to use JSON and for this, you need to change your Web Service to accept and returns JSON parameters. In ASP.NET 3.5 there is a built-in feature for that but, in ASP.NET 2.0 you need to change your Web Service definition. J. Eggers has a create step-by-step tutorial on how to JSONize your Web Service.

The dll needed for JSONizing your WebService can be found in the source code pack under demo page below.

Methods and Parameters

ezAjax

This method is probably the most useful method where you call it over an element, acting as your form, and send some options.

This is how this method is going to be called :

$("#myform").ezAjax(options);

Default value for options is :

var ez_defaultOptions={
    url:"#", // the url to the WebService Method
    type:"POST", //can be "GET" or "POST"
    method:"json", //can be "xml" or "json"
    cache:false,
    async:true,
    success:function(event, XMLHttpRequest, ajaxOptions){}, //will be called once the request is successful.
    error:function(event, XMLHttpRequest, ajaxOptions, thrownError){}, //will be called once there is an error.
    complete:function(event, XMLHttpRequest, ajaxOptions){} // will be called when the request is completed.
};

If you do not provide any of the above values for options then it’s going to use the default value.

There is also one more parameter in options which is not defined by default and that’s “sender” which indicated the sender and usually has a value of “this“.

{... ,
sender:this,
...}

ezGetQuery

This method returns the query created from the fields and values within the selector.
For example:

<div id="myForm">
  First Name : <input type="text" id="fname" value="John"/> <br>
  Last Name : <input type="text" id="lname" value="Doe"/>
</div>

Calling this on above div:

var strQuery=$("#myForm").ezGetQuery();

Returns:

fname=John&lname=Doe

ezGetJSON

This method returns the JSON string created from the fields and values within the selector.
For example:

<div id="myForm">
  First Name : <input type="text" id="fname" value="John"/> <br>
  Last Name : <input type="text" id="lname" value="Doe"/>
</div>

Calling this on above div:

var strJSON=$("#myForm").ezGetJSON();

Returns:

{fname:"John",lname:"Doe"}

Demo

You can find the demo here.

Downloads

Go to ezAjax Plug-in page to download the latest version.

Requirements

The only requirement is jQuery 1.3.2 +

Parsing the returned values

You may use these handy plug-ins if you need to parse JSON or XML values.