Introduction
Few months back i have got a requiremnet of fetching some inventory data from a server and show it to a html page. The interesting fact was the client server(the one which i want to show the datas , does not support dot net files).If it support we can directly add the web references and display the datas.So what to do. I have tried JSONP, Angular Json but i could not make it to work. Then i came up with an another idea.
Background
Here i have ,
1 A webservice which gets the datas from the SQL Server 2008 DB in the HTML format.
2. One HTML file where we need to show the datas
3. Jquery latest version js file
Using the code
So lets start.
make a html table in the file like following
<table id="inventory">
<tr id="maintr">
<th>
LOCATION </td>
<th>
20 GP </td>
<th>
40 FC </td>
<th>
40 GP
</th>
<th>
40 OT
</th>
<th>
40 HCGP
</th>
</tr>
</table>
Add the following line to the file
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
Add the styles to the table
<style type="text/css">
#inventory
{
font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
width: 600px;
border-collapse: collapse;
}
#inventory td
{
font-size: 10pt;
border: 1px solid #25aacc;
padding: 3px 7px 2px 7px;
}
#inventory th
{
font-weight: bold;
font-size: 10pt;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #25aacc;
color: #fff;
padding: 3px 7px 2px 7px;
border: 1px solid #25aacc;
}
#inventory tr.normal td
{
font-size: 10pt;
color: #000;
background-color: #ecf6f8;
}
#inventory tr.alt td
{
font-size: 10pt;
color: #000;
background-color: #c0e6ef;
}
</style>
Add the following Sripts to get the datas from the web service
<script type="text/javascript">
var gp20;
var gp40;
var fc40;
var ot40;
var hcgp40;
$(document).ready(function () {
$("#accordion").accordion();
$.post("RetWS.php", {
action: "test"
},
function (data) {
var className;
var i = 0;
var xdoc = $.parseXML(data),
$xml = $(xdoc);
$($xml).find('AvailableSaleUnitsDetail').each(function () {
if (i % 2 != 0) {
className = 'alt';
}
else {
className = 'normal';
}
if (parseInt($(this).find('_x0032_0GP').text()) > 50) {
gp20 = '50 +';
}
else {
gp20 = $(this).find('_x0032_0GP').text();
}
if (parseInt($(this).find('_x0034_0FC').text()) > 50) {
fc40 = '50 +';
}
else {
fc40 = $(this).find('_x0034_0FC').text();
}
if (parseInt($(this).find('_x0034_0GP').text()) > 50) {
gp40 = '50 +';
}
else {
gp40 = $(this).find('_x0034_0GP').text();
}
if (parseInt($(this).find('_x0034_0OT').text()) > 50) {
ot40 = '50 +';
}
else {
ot40 = $(this).find('_x0034_0OT').text();
}
if (parseInt($(this).find('_x0034_0HCGP').text()) > 50) {
hcgp40 = '50 +';
}
else {
hcgp40 = $(this).find('_x0034_0HCGP').text();
}
$("#inventory").append("<tr class=" + className + " ><td id=" + $(this).find('Location').text() + ">" + $(this).find('Location').text() + "</td> <td>" + gp20 + "</td><td >" + fc40 + "</td> <td>" + gp40 + "</td><td >" + ot40 + "</td><td >" + hcgp40+ "</td> </tr>");
i++;
});
})
});
</script>
Here
RetWS.php is my php file which actually gets the datas from asmx web service from other server.
in the RetWs.php you can do the following codes
<?php
if(isset($_POST['action']) && !empty($_POST['action'])) {
$action = $_POST['action'];
switch($action) {
case 'test' : doWebService();
break;
}
}
function doWebService()
{
$client = new SoapClient("http://Here paste link to your webservice");
echo $client->getInventoryForWs()->getInventoryForWsResult;
}
?>
the link may look like
http:
Make sure that there is no spelling mistakes :)