Follow

Example API Call using HTML/JQuery

The following code shows an example of how to call our API to get a list of reports based on your customer id using basic HTML and javascript with the JQuery library.

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml" >
03.    <head>
04.        <title>CitySourced API Example - GetReports()</title>
05.        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
06.        <script type="text/javascript">
07.            function doGetReports()
08.            {
09.             $.post("http://www.yourdomain.com/your_proxy_handler.ashx",
10.                 { Xml: createGetReportsXml() },
11.                 function(xml) { parseGetReportsXml(xml); },
12.                 "xml");
13. 
14.            /**********************************************************
15.            // AJAX won't allow a cross site get/post call, so we've
16.            // referenced the xml output that results from the post
17.            // below. To get around this, you'll have to create your
18.            // own proxy (PHP or .NET or whatever) to proxy the request
19.            // through your own domain.
21.                 { Xml: createGetReportsXml() },
22.                 function(xml) { parseGetReportsXml(xml); },
23.                 "xml");
24.            */
25.            }
26.            function parseGetReportsXml(xml)
27.            {
28.             $("#GetReports_Input").hide();
29.                 $(xml).find('Report').each(function()
30.             {
31.                 var id = $(this).find('Id').text();
32.                 var requestType = $(this).find('RequestType').text();
33.                 var url = $(this).find('UrlDetail').text();
34.                 var html = "<a href='" + url + "'>" + requestType + " [ID# " + id + "]" + "</a>";          
35.                 $("<li></li>").html(html).appendTo("#Reports");
36.             });
37.             $("#GetReports_Output").show();
38.            }
39.            function createGetReportsXml()
40.            {
41.                var xml = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
42.                xml += "<CsRequest>";
43.                xml += "<ApiAuthKey>{INSERT YOUR AUTH KEY HERE!}</ApiAuthKey>";
44.                xml += "<ApiRequestType>GetReportsByCustomerId</ApiRequestType>";
45.                xml += "<ApiRequestVersion>1</ApiRequestVersion>";
46.                xml += "<MaxResults>250</MaxResults>";
47.                xml += "<IncludeDetails>False</IncludeDetails>";
48.                xml += "<DateRangeStart></DateRangeStart>";
49.                xml += "<DateRangeEnd></DateRangeEnd>";
50.                xml += "</CsRequest>";       
51.                return xml;
52.            }
53.        </script>
54.        <style>
55.            div { margin-bottom: 5px; }
56.        </style>
57.    </head>
58.    <body>
59.        <div>
60.            <input type="button" name="btnGetReports" id="btnGetReports" value="Get Reports" onclick="doGetReports();" />
61.        </div>
62.        <div id="GetReports_Output" style="display:none;">
63.            <h2>Report Results...</h2>
64.            <ol id="Reports"></ol>
65.        </div>
66.    </body>
67.</html>
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk