I need a code help on HTML5. I have webservice runs database and returns JSON data. But, when It comes to HTML5 client part, how to use it and how to display is an issue for me.
WebMethod is ‘GetItemData’, return type is String for JSON data. Database table consists: ItemID, ItemName, ItemPrice and ItemOnHand columns.
I am publishing my web service successfully.
Please help me out from this coding issue. I am enclosing HTML5 Client code, with this mail as well. Download the Scripts ans Styles from here. JqxGrid is DataGrid control that displays the entire data from JSON to Grid.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<link href="Styles/jqx.base.css" rel="stylesheet" type="text/css"/>
<link href="Styles/jqx.classic.css" rel="stylesheet" type="text/css"/>
<script src="Scripts/jqxcore.js" type="text/javascript"></script>
<script src="Scripts/jqxbuttons.js" type="text/javascript"></script>
<script src="Scripts/jqxdata.js" type="text/javascript"></script>
<script src="Scripts/jqxgrid.js" type="text/javascript"></script>
<script src="Scripts/jqxgrid.selection.js" type="text/javascript"></script>
<script src="Scripts/jqxmenu.js" type="text/javascript"></script>
<script src="Scripts/jqxscrollbar.js" type="text/javascript"></script>
<script type="text/javascript">
function GetItemsData() {
try {
url = "http://localhost:1806/HTMLWebService.asmx/Getjsonitems",
source = {
datatype: "json",
datafields: [
{ name: 'ItemID' },
{ name: 'ItemName' },
{ name: 'ItemPrice'},
{ name: 'ItemOnHand'}]
};
$.ajax({
type: "POST",
dataType: "json",
async: false,
url: "http://localhost:1806/HTMLWebService.asmx/Getjsonitems",
cache: false,
contentType: "application/json; charset=utf-8",
success: SucceedFunc,
data: "{}",
failure: FailedFunc
});
}
catch (e) {
alert('failed to call web service. Error: ' + e);
}
}
function SucceedFunc(data, status) {
debugger;
alert("Enter into Success");
source.localdata = data.d;
alert(source.localdata = data.d);
//Preparing the data for use
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
source: dataAdapter,
theme: 'classic',
columns: [
{ text: 'Item ID', dataField: 'ItemID', width: 250 },
{ text: 'Item Name', dataField: 'ItemName', width: 150 },
{ text: 'Item Price', dataField: 'ItemPrice', width: 180 },
{ text: 'Items On Hand', dataField: 'ItemOnHand', width: 180 }
]
});
}
function FailedFunc(request, status, error) {
debugger;
alert("Error occured");
}
</script>
</head>
<body onload="GetItemsData()">
<div id="jqxgrid"></div>
</body>
</html>