Binding data on page using Ajax calls (Jquery + Json)- Javascript File & Web Page

2. JavaScript

Creating a method in javascript file using jquery is not a Rocket science. It is as easy as creating a method in any object oriented programming. Learn the syntax all logic is same as in OOPs programming.

1. First method in javascript file should be:

$(document).ready(function()

{

AssessmentArea(); // Add method here that you want to call on document load.

}

This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

Ajax call format should be as below :

$.ajax({

type: “POST”,

url: “data.asmx/ListAssesmentArea”

data: “{}”

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

dataType: "json",

success: function(data)

{

}

});

type:

Default: 'GET'

The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.

url: Its URL of web-service method.

date: It contains parameters for the method that we are calling in webservice.You can pass parameters in it as shown below.

contentType: When sending data to the server, use this content-type. For Json it is application/json; charset=utf-8.

dataType: Data to be sent to the server.

success: function(data): Function that return data if ajax call performed successfully.

function AssessmentArea()

{

$.ajax

({

type: "POST",

url: "data.asmx/ListAssesmentArea",

data: "{AA:'',JJ:'',NH:'',PC:'"+ $("#hdnPC").val() +"',UT:'"+ $("#hdnUT").val() +"',PS:'"+ $("#hdnPS").val() +"',View:'"+ $("#hdnView").val() +"',Characteristics:'"+ $("#hdnLC").val() +"',LALR:'"+ $("#hdnALR").val() +"',Bedroom:'"+ $("#hdnBedrooms").val() +"',Bathroom:'"+ $("#hdnBathrooms").val() +"',FinishedArea:'"+ $("#hdnFA").val() +"',FT:'"+ $("#hdnFT").val() +"',AYB:'"+ $("#hdnAYB").val() +"',EYB:'"+ $("#hdnEYB").val() +"',AssessmentValue:'"+ $("#hdnAV").val() +"',ImprovementValue:'"+ $("#hdnIV").val() +"',TotalValue:'"+ $("#hdnTV").val() +"'}",

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

dataType: "json",

success: function(data)

{

var items = "";

var array;

if($("#hdnAA").val() != '')

{

array = $("#hdnAA").val().split(',');

}

for(var index in data)

{

var abc = JSON.parse(data[index]);

var a=0;

jQuery.each(abc, function(rec)

{

var str = "";

for(var Id in array)

{

if(array[Id] == this.pr_aa_codeid)

{

str = "checked='checked'" ;

break;

}

}

});

}

$("#dvAssesmentArea").html(items);

},

error: function(xhr, status, error)

{

}

});

}

JSON.parse() : This method is used to convert Json formated string to object. So that it can be read easily.

3. Webpage:

1. Add latest jquery libraries to your application & add refrence of below javascript files on your page:

// This namespace contains method that reformat the Json formated string to object.

// This is our jquery file.

So now your page has only this DIV and data is loading from JS file.

I'll soon add a link to download sample application. Till then try it your self :-)

Cheers,

Vikas Sharma