Tuesday, October 30, 2012

jQuery Load Specific HTML Element from Response Example


The jQuery Load() ajax method supports HTML and Text type responses sent by the server.
The Load method can selectively load only a specific element from the the HTML response by passing the ID of the element to be loaded in the Query string of the request URL.

In this post we shall see on how to load only a specific element from the HTML data returned from the server using the jQuery Load() method.

The syntax for receiving and displaying a specific element from the HTML response is as follows.

$("#<Target HTML element ID>").load("<Server URL #Element ID>");

The following example receives a HTML format data from the server and displays only the element with the ID
tbl2 from the response data in a DIV tag in the browser.

jQuery Load Partial HTML Response Example

The jQuery Load() ajax method supports HTML and Text type responses sent by the server. 
The Load method can selectively load only part of the HTML response by passing the ID of the element to element to be loaded in the Query string of the request URL.

In this post we shall see on how to process only a part of the HTML data returned from the server using the jQuery Load() method.

The syntax for receiving and processing HTML response is as follows.

$("#<Target HTML element ID>").load("<Server URL #Element ID>");

The following example receives a HTML format data from the server and displays only the element with the ID
tbl2 from the response data in a DIV tag in the browser.

jQuery Ajax Method

jQuery provides various methods like ajax, load, get, post, getJSON, getJSON etc  to make an Ajax call. In this post we shall see on how to use the Ajax() method to make an Ajax call.

The Ajax() method is core method used to perform ajax calls using jQuery, The ajax method supports GET & POST requests, it also supports the server data returned in the following formats.

HTML
XML
Text
JSON
Script

The Syntax for the Ajax() method is as follows.

Thursday, October 25, 2012

jQuery Load POST Request Example


The jQuery Load() ajax method supports both HHTP GET & HTTP POST requests. In this post we shall see on how to send a HTTP POST request to the server.

The syntax for sending a HTTP POST request using the Load() method is as follows.

$("#<Target HTML element ID>").load("<Server URL >", <POST Data>);

The following example sends a HTTP POST request to the server using the Load() method and displays the data returned by the server in a DIV tag in the browser.



jQuery Load GET Request Example


The jQuery Load() ajax method supports both HHTP GET & HTTP POST requests. In this post we shall see on how to send a HTTP GET request to the server.

The syntax for sending a HTTP GET request using the Load() method is as follows.

$("#<Target HTML element ID>").load("<Server URL with Parameters>");

The following example sends a HTTP GET request to the server using the Load() method and displays the data returned by the server in a DIV tag in the browser.


jQuery Load Text Response Example


The jQuery Load() ajax method supports HTML and Text type responses sent by the server. In this post we shall see on how to process Text data returned from the server using the jQuery Load() method.

The syntax for receiving and processing Text response is as follows.

$("#<Target HTML element ID>").load("<Server URL>");

The following example receives a Text format data from the server and displays the data in a DIV tag in the browser.


jQuery Load HTML Response Example


The jQuery Load() ajax method supports HTML and Text type responses sent by the server. In this post we shall see on how to process HTML data returned from the server using the jQuery Load() method.

The syntax for receiving and processing HTML response is as follows.

$("#<Target HTML element ID>").load("<Server URL>");

The following example receives a HTML format data from the server and displays the data in a DIV tag in the browser.


jQuery Load Method

jQuery provides various methods like ajax, load, get, post, getJSON, getJSON etc  to make an Ajax call. In this post we shall see on how to use the load() method to make an Ajax call.

The load() method is used to load HTML data from the server directly into elements in the page like DIV, Table etc

The Syntax for the load() method is as follows.

Monday, October 22, 2012

jQuery Ajax JSON Response Example

jQuery supports different types of responses data types which are sent by the server as a result of processing Ajax request, the various types of data supported are HTML, XML, JSON and Text. In this post we shall see on how to process JSON data returned from the server using jQuery.
The syntax for receiving and processing JSON response is as follows.

$.ajax({
    url: "AjaxData.json",
    cache: true,
    dataType: "json",
    success: function(result) {…}
});

The following example receives a JSON format data from the server and displays the data in a DIV tag in the browser.

jQuery Ajax Text Response Example

jQuery supports different types of responses data types which are sent by the server as a result of processing Ajax request, the various types of data supported are HTML, XML, JSON and Text. In this post we shall see on how to process Text data returned from the server using jQuery.

The syntax for receiving and processing Text response is as follows.

$.ajax({
    url: "AjaxData.txt",
    cache: true,
    dataType: "text",
    success: function(result) {…}
});

The following example receives a Text format data from the server and displays the data in a DIV tag in the browser.


jQuery Ajax XML Response Example

jQuery supports different types of responses data types which are sent by the server as a result of processing Ajax request, the various types of data supported are HTML, XML, JSON and Text. In this post we shall see on how to process XML data returned from the server using jQuery.

The syntax for receiving and processing XML response is as follows.

$.ajax({
    url: "AjaxData.xml",
    cache: true,
    dataType: "xml",
    success: function(result) {…}
});

The following example receives a XML format data from the server and displays the data in a DIV tag in the browser.


jQuery Ajax HTML Response Example


jQuery supports different types of responses data types which are sent by the server as a result of processing Ajax request, the various types of data supported are HTML, XML, JSON and Text. In this post we shall see on how to process HTML data returned from the server using jQuery.

The syntax for receiving and processing HTML response is as follows.

$.ajax({
    url: "AjaxData.html",
    cache: true,
    dataType: "html",
    success: function(result) {…}
});

The following example receives a HTML format data from the server and displays the data in a DIV tag in the browser.

jQuery Ajax POST Example

jQuery offers various ways in which ajax requests can be passed to the server, the ajax() method is the core method which provides all types of options to make Ajax requests. In this post we shall see on how to send a POST request using the jQuery ajax() method.

The syntax for sending a POST request using the ajax() method is as follows.

$.ajax({
    url: "",
    type: 'POST',
    data: {},     
    cache: <true/false>,
    dataType: "",
    success: function(result) {…});
    }
});
The following example sends a HTTP POST request to the server, processes the XML returned from the server page and displays the result in the browser.

jQuery Ajax GET Example

jQuery offers various ways in which ajax requests can be passed to the server, the ajax() method is the core method which provides all types of options to make Ajax requests. In this post we shall see on how to send a GET request using the jQuery ajax() method.
The syntax for sending a GET request using the ajax() method is as follows.

$.ajax({
    url: "",
    type: 'GET',
    cache: <true/false>,
    dataType: "",
    success: function(result) {…});
    }
});

The following example sends a HTTP GET request to the server, processes the XML returned from the server page and displays the result in the browser.

Friday, October 19, 2012

FZ6Y8XFNACR9

FZ6Y8XFNACR9

Asp.net jQuery dropdown change Text value


In this post, we will see on how to change the Text values of the items in a DropDown

To change the text values of the dropdown list items we can use the text() function as follows.  

$('yourDropDown option[value=1]').text ('New Text');

Here is a full example

Asp.net jQuery dropdown add items


In this post, we will see on how to add additional items to an existing Dropdown list

To add items to an existing dropdown we can use the append() function as follows.  $('yourDropDown') .append("<option value=\"1\">Test</option>");

Here is a full example

Asp.net jQuery clear dropdown items


In this post, we will see on how to clear the options which exist in a Dropdown list

To clear the existing items from a dropdown we can use the empty() function as follows.  $('yourDropDown').empty();

Here is a full example

Thursday, October 18, 2012

jquery ajax authentication Example


Ajax calls can be authenticated with a pair of username and password credentials to secure the resources shared by the server, the sever can mandate all the request calls to send a valid set of credentials to process the request.

In this post we shall see on how to make a request to a server by passing the username and password along with the request, additionally we will also encrypt the username and password using base64 encryption.

In perform the base64 encryption we will have to add the
base64.js file. The base64.js file can be obtained from the webtoolkit site.
http://www.webtoolkit.info/javascript-base64.html

The following script makes a request to the server and passes the username and password required to authenticate the request.

jquery ajax authentication

Ajax calls can be authenticated with a pair of username and password credentials to secure the resources shared by the server, the sever can mandate all the request calls to send a valid set of credentials to process the request.

The credentials can be passed using GET or POST, additionally since the credentials are passed over the network, to avoid hacking we can encrypt the username and password using an encryption algorithm and pass the same; the credentials can be decoded at the server end before authentication.

jquery ajax async Example

The async property can be used to control the behavior of the Ajax call placed from jQuery, it can take values either true or false. The default value for this property is true.

In this post we shall see on how to control the behavior of the Ajax call using the cache property.

The following script sets the async property to false, hence every Ajax request will be sent to the server and the UI will wait till the server processes the request and sends the result.

jquery ajax async calls

The async property can be used to control the behavior of the Ajax call placed from jQuery, it can take values either true or false. The default value for this property is true.

When set to true – The ajax call is made asynchronously, hence the user can continue working in the web application till the request is processed and returned from the server.

When set to false – The ajax call is made synchronously, hence the user interface is locked, the user cannot perform any other operation in the browser

Wednesday, October 17, 2012

jquery ajax caching Example

The cache property can be used to set the caching of Ajax data in the browser, the propertu can take value true or false.

In this post we shall see on how to control the caching of data in the browser using the cache property.

The following script sets the cache property to true, hence every Ajax request will be served from the server.

jquery ajax caching

The cache property can be used to set the caching of Ajax data in the browser, the propertu can take value true or false.

When set to true – The ajax data response is cached in the browser and reused for to serve successive requests.

When set to false – The ajax data response is not cached in the browser and a fresh request is made to the server every time to fetch the data from the server.

jquery ajax readyState Example

The readyState  property holds the status of the  XMLHttpRequest, the readyState property does not give any information on the success / failure of the request, but just gives an indication on the progress of the request.

In this post we shall see on how to get the readyState value of an Ajax request from the XMLHttpRequest.

The ajaxComplete event gets fired when any of the Ajax request in the page gets completed, the following script captures the readyState properties of the ajaxComplete event and interpret the status of the request.

jquery ajax readyState

The readyState  property holds the status of the  XMLHttpRequest, the following are the possible values for the readyState property.

0: request not initialized 
1: server connection established
2: request received 
3: processing request 
4: request finished and response is ready

jquery ajax status Example

JQuery offers 2 properties status and statusText, which can be used to interpret the status of an Ajax request. These properties are available in the XMLHttpRequest object which is returned with the ajaxComplete, ajaxSuccess & ajaxError event handlers.

In this post we shall see on how to user these properties and interpret the status of the Ajax Request.

The ajaxComplete event gets fired when any of the Ajax request in the page gets completed, the following script captures the status and statusText properties of the ajaxComplete event and interpret the status of the request.

jquery ajax status

JQuery offers 2 properties status and statusText, which can be used to interpret the status of an Ajax request. These properties are available in the XMLHttpRequest object which is returned with the ajaxComplete, ajaxSuccess & ajaxError event handlers.

If an Ajax request fails, then we can use the status and statusText properties to investigate on the cause of the error, the status property gives the error code and the statusText property gives the error description of the error.

Some of the possible values for the status property are as follows

Tuesday, October 16, 2012

jquery ajaxStop vs ajaxSuccess

The events ajaxStop fires only when all the Ajax requests in the page complete their execution, while the ajaxSuccess get fired for every individual Ajax request which executes succesfully.

The ajaxStop event handler does not provide any parameters since it gets fired only after all the Ajax requests in the page get completed, whereas the ajaxSuccess event handler provides the request object and a set of settings as parameters which can be used to identify the request for which the ajaxSuccess event got fired.

The syntax for the ajaxSuccess event handler is as follows.

jquery ajaxStop vs ajaxComplete


The events ajaxStop fires only when all the ajax requests in the page complete their execution, while the ajaxComplete get fired for every individual Ajax request.

The ajaxStop event handler does not provide any parameters since it gets fired only after all the Ajax requests in the page get completed, whereas the ajaxComplete event handler provides the request object and a set of settings as parameters which can be used to identify the request for which the ajaxComplete event got fired.

The syntax for the ajaxComplete event handler is as follows.

jquery ajaxSuccess vs ajaxComplete


Both the events ajaxSuccess & ajaxComplete get fired for every individual Ajax request, the difference is that the ajaxComplete event gets fired for every request which gets completed, irrespective of whether the request was successful of or ended with an exception, but the ajaxSuccess event gets fired only when the request gets executed successfully.

The syntax for both the events are almost similar, since they get fired for all the Ajax request we have to use the settings in the event parameters to indentify the request which raised this particular event.

The syntax for the ajaxComplete event handler is as follows.

jquery ajaxSuccess

The jQuery ajaxSuccess event gets fired when an Ajax requests gets completed successfully, it fires for every individual request which gets completed successfully in the page.
 
This event can be used to handle individual Ajax requests in a page, the handler of the ajaxSuccess gets fired when any of the request in the page get completed successfully, we should use the parameters of the event to identify which particular request got completed.

The ajaxSuccess event gets fired only when the request is executed successfully, will not get fired if the request ended in an error.

The syntax for the ajaxSuccess event handler is as follows.

jquery ajaxComplete

The jQuery ajaxComplete event gets fired when an Ajax requests gets completed, it fires for every individual request which gets completed in the page.
 
This event can be used to handle individual Ajax requests in a page, the handler of the ajaxComplete gets fired when any of the request in the page get completed, we should use the parameters of the event to identify which particular request got completed.

The ajaxComplete event gets fired irrespective of whether the request was executed successfully or exited with an error.

The syntax for the ajaxComplete event handler is as follows.

jQuery ajaxStop


The jQuery ajaxStop event gets fired when all the Ajax requests in the page have completed, it does not fire when an individual request gets completed but waits for all the ajax request in the page to get completed.

This event can be typically used to show / hide loading.. indicators in a page which has multiple Ajax request executing simultaneously.

The ajaxStart event handler can be used to show the Loading.. indicator and the ajaxStop handler can be used to hide the Loading.. indicator.

The syntax for the ajaxStop event handler is as follows.

jQuery ajaxStart


The jQuery ajaxStart event gets fired when the first Ajax requests is initialed in a page, it does not fire when every individual request starts but gets fired only when the first request is fired in the page.

This event can be typically used to show / hide Loading.. Indicators in a page which has multiple Ajax request executing simultaneously.

The ajaxStart event handler can be used to show the Loading.. Indicator and the ajaxStop handler can be used to hide the Loading.. Indicator.

The syntax for the ajaxStart event handler is as follows.

Friday, October 12, 2012

jQuery Ajax request progress events Example


jQuery provides 2 events ajaxStart and ajaxEnd, which will get fired when an Ajax request starts and when the request Ends, these events can be used to display a loading information to the user.

In this post we shall see on how to use the jQuery Ajax progress indicator events ajaxStart and ajaxEnd to display the status of an Ajax request.

We will make a call to the server which will be time consuming and see on how these events show a loading message till the request is completed.

Add the following code to a page, and click on the Show Progress button.

jQuery Ajax request progress indicator events


Ajax requests are handled in 2 parts, the client makes the request to the server, processing happens at the server and the result in sent back to the client, the client decodes the data sent by the server and displays it in the browser.

If the processing activity at the server end is a time consuming one, the user will not be able to guess on what is happening and how long will it take to process the request, since the page does not post back the browser’s progress bar will also be idle.

jQuery Ajax Error Handling Example

jQuery provides an error handler event ajaxError to handle errors which occur while making Ajax requests using jQuery. We can bind the ajaxError event to an error handler method and use the method to display the errors in an user friendly way.

In this post we shall see on how to use the ajaxError event to display the exception details.
We will try to call a HTML page which does not exist in the server and see on how the error is handled.

Add the following code to a page, and click on the Error Handler button.

jQuery Ajax Error Handling

Handling errors is an important activity while using Ajax, since it will be difficult Ajax requests, the requests will be shared between the Client and the Server side, to successfully debug an error we will have to keep track of both the Client side and the Server side code, hence it becomes more important to track more efficiently while using Ajax.

jQuery provides an error handler event ajaxError to handle errors which occur while making Ajax requests using jQuery. We can bind the ajaxError event to an error handler method and use the method to display the errors in an user friendly way.

The syntax for ajaxError event is as follows.

jQuery Ajax Tutorial

jQuery provides a set of methods and events to perform Ajax calls to the server. JQuery has a set of flexible methods which allows us to send requests to the server in different formats and get data from the server in various formats based on the need.

Supported Request Types
jQuery supports both the HTTP GET and HTTP POST request types to send requests to the server.

Supported Data Formats
jQuery can handle data returned from the server in any of these formats.

What is Ajax?

Ajax stands for Asynchronous JavaScript and XML, as the name suggests Ajax makes use of JavaScript to perform asynchronous calls to the server to send/receive data. Ajax helps in updating information in a page without refreshing the entre page, this helps in reducing the response time. 


Example
A typical Ajax example is a country and city dropdown, on selecting a country in the country dropdown an Asynchronous Ajax request is sent to the server to fetch the cities corresponding to the selected country, the server sends back the list of cities in either Test, XML, HTML or JSon format, Ajax receives the data parses it and loads it into the cities dropdown.


Ajax is all around you, for example Gmail uses Ajax, if you select a few items and delete them, and you could notice that the selected items get deleted but the page does not get refreshed, this is a live example of Ajax.



Friday, October 5, 2012

jQuery hierarchy selector Overview

jQuery hierarchy selector Overview

jQuery state selector Overview

jQuery state selector Overview

jQuery wildcard selector Overview

jQuery wildcard selector Overview

jQuery attribute selector Overview

jQuery attribute selector Overview

jQuery type selector Overview

jQuery type selector Overview

jQuery selector Overview

jQuery selector Overview

jQuery hierarchy selector Example


In this post jQuery hierarchy selector Example, we shall see the various hierarchy selectors available in jQuery, and how to use them to filter out elements.

jQuery last selector for Dropdown


The jQuery last selector can be used with other type selectors to filter elements specific to the types, here is the syntax to use the last selector with the Dropdown type selector.

$("select:last")

In this post we shall see on how to use the jQuery last selector with the Dropdown
type selector to get the last Dropdown element in the page.

The following script gets the last Dropdown element in the page.

jQuery first selector for Dropdown


The jQuery first selector can be used with other type selectors to filter elements specific to the types, here is the syntax to use the first selector with the Dropdown type selector.

$("select:first")

In this post we shall see on how to use the jQuery first
selector with the Dropdown type selector to get the first Dropdown element in the page.

The following script gets the first Dropdown element in the page.

jQuery last selector for Textbox


The jQuery last selector can be used with other type selectors to filter elements specific to the types, here is the syntax to use the last selector with the text type selector.

input[type=text]:last

In this post we shall see on how to use the jQuery last selector with the text type selector to get the last textbox element in the page.

The following script gets the last textbox element in the page.