How to do it

1. In the document.ready() function of the jQuery script block, define the event handler for the click event of the button control:

2. Prevent default form submission:


3. Clear the containing div area on the form:

4. Add the css class Progress to the containing div area. Note that this will cause the progress indicator to display on the page:


5. Call the sendData() function. The AJAX call is made in this function:


6. Define the sendData() function as follows:

function sendData() {

7. Get the complete path of the current page:

var loc = window.location.href;

loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "Recipel. aspx" : loc;

8. Make the AJAX call:

9. Specify the HTTP request type:

10. Specify the URL of the page method:

url: loc + "/GetServerTime",

11. Specify the content type of the data transfer:

contentType: "application/json; charset=utf-8",

12. Specify the response data type:

dataType: "json",

13. Define the callback function for successful invocation. On receiving the response, remove the css class Progress from the containing div area. As a result, the progress indicator image will be removed from the page. Display the AJAX response in the div area instead:

success: function(msg) {

$("#contentArea").removeClass("Progress"); $("#contentArea").html(msg.d);

Note that the AJAX response is wrapped in a d object e.g. {"d":true}. Hence, to access the response from the page method, we use msg.d.

0 0

Post a comment