CODEWITHSUNDEEP
jqueryajaxjsonhtmljqxgrid
Kiran teja Avvaru
Kiran teja Avvaru

Reputation: 364

How to call a json data webservice for HTML5 applications?

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>

Upvotes: 2

Views: 6461

Answers (2)

Satya Kalluri
Satya Kalluri

Reputation: 5214

If you could post the error/issue you get, it would be easier for folks to help. Expecting to run code on your behalf would lead to very few folks interested to help.

Getting to the point: Are you sure, if the HTTP method that's used in your code "POST" is correct. From what the web-servcies does, it's only fetching data from DB. So, the usual HTTP verb used for this kind of web-service (since, it's only reading data and not modifying) is GET. In that case, you should use GET in your $.ajax as well..

Try,

$.ajax({
                type: "GET",
                url: "http://localhost:1806/HTMLWebService.asmx/Getjsonitems",
                async: false,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: SucceedFunc,
                data: "{}", // You don't necessarily have to put this.
                failure: FailedFunc
            });

Upvotes: 0

Mustaq
Mustaq

Reputation: 121

try this

$.ajax({
        cache: false,
        type: "GET",
        async: false,
        data: {},
        url: "1231212312312312.svc/webBinding/Result?metaTag=" + meta,
        contentType: "application/json; charset=utf-8",
        crossDomain: true,
        success: function(){},
        error: function(){}
      });

Upvotes: 0

Related Questions