Step 4: Add two divs inside form tag. One to show data and other to show error message in case any error occurs while retrieving data..
<div id="displayList"></div>
<div id="errorMessage"></div>
Step 5: On document ready call the webmethod using $.ajax which will call renderTable on successfully retrieval of data from GetRecipie webmethod. renderTable method will loop through the result set and display the value in the div.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
function renderTable(result)
var dtData = [];
var i = 0;
$.each(result, function() {
$('#displayList').append("By " + result[i].by);
$('#displayList').append(" | Recipiename " + result[i].Recipiename);
$('#displayList').append(" | Preparationtime " + result[i].preparationtime);
$('#displayList').append(" | Cookingtime " + result[i].cookingtime);
$('#displayList').append("<br/>");
i++;
});
}
$.ajax({
type: "POST",
url: "jQueryIterateThroghJSON.aspx/GetRecipie",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
renderTable(response.d);
},
failure: function(errMsg) {
$('#errorMessage').text(errMsg); //errorMessage is id of the div
}
});
});
</script>