Click here to Skip to main content
14,236,520 members
Rate this:
Please Sign up or sign in to vote.
See more:
Can I Consume WebAPI using JQuery/AJAX, in plain HTML file?

What do I need in order to consume in plain HTML file? i.e. reference to specific jquery/ajax javascript library etc.

1) It gives me javascript error at below line.
Error: $jQuery is undefined
Line: $jQuery.support.cors = true;

Am I missing some javascript reference?

2) If I remove above line, it goes straight into error function and shows me following message.
ERROR: Could not retrieve the data\n

I tried to access my web api service in browser and it does return JSON data to me.
http://localhost:29604/api/Region[^]


Below is the data I am able to receive in browser:

[{"RegionID":1,"RegionDescription":"Eastern "},{"RegionID":2,"RegionDescription":"Western "},{"RegionID":3,"RegionDescription":"Northern "},{"RegionID":4,"RegionDescription":"Southern "}]



Any help?


<!DOCTYPE html>
<html lang="en">
<head>
	<title>Web API Client (using JQuery/AJAX) for Region</title>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
	<h2>Web API Client (using JQuery/AJAX) for Region</h2>
	<script type="text/javascript" >
		function GetRegion() {
			alert('inside GetRegion():');
			$jQuery.support.cors = true;
			$.ajax({
				type: "GET",
				url: "http://localhost:29604/api/Region",
				dataType: "json",
				contentType: "json",
				success: function (data) {
					// Write logic to display/process your data
					WriteResponse(data);
					alert('success:');
				},
				error: function (x, y, z) {
					alert('ERROR: Could not retrieve the data\n');
				}
			});
		}

		function WriteResponse(Region) {        
			// Update this based on your data fields
			var strResult = "<table><th>ID</th><th>Description</th>";
			$.each(Region, function (index, Region) {
				strResult += "<tr><td>" + Region.RegionID + "</td><td> " + Region.RegionDescription + "</td></tr>";
			});
			strResult += "</table>";
			$("#outputData").html(strResult);
		}

		function ShowRegion(Region) {
			if (Region != null) {
				// Update this based on your data fields
				var strResult = "<table><th>ID</th><th>Name</th><th>Description</th>";
				strResult += "<tr><td>" + Region.RegionID + "</td><td> " + Region.RegionDescription + "</td></tr>";
				strResult += "</table>";
				$("#outputData").html(strResult);
			}
			else {
				$("#outputData").html("No Results To Display");
			}
		}
	</script>
	<div>
		<table>
			<tr>
				<td>
					<button onclick="GetRegion();">Get Regions</button></td>
			</tr>
		</table>
	</div>
	<div id="outputData" class="scroll" style="text-align: center;"></div>
</body>
</html>
Posted

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 2

Update:

Solved by using:
$.support.cors = true; // This is required for Ajax cross domain requests.

instead of:
$jQuery.support.cors = true;

since $ is an alias for jQuery.

Background:
When I displayed the error in alert, with values x, y and z... I found the following values.
x = [object Object]
y = error
z = No Transport

Then I found the following article:
http://forums.arcgis.com/threads/101232-Error-microsoft-jscript-runtime-error-jquery-is-undefined[^]

I was able to call/consume Web API in plain Html file. Thanks All!
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100