ASP.NET Podcast Show #128 - AJAX with jQuery
Original Url: http://aspnetpodcast.com/CS11/blogs/asp.net_podcast/archive/2008/12/03/asp-net-podcast-show-128-ajax-with-jquery.aspx
Show Notes:
- AJAX with jQuery.
- Download the intellisense vsdoc file
- Visual Studio 2008 SP1 hotfix.
Source Code:
jQuery Version:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery
Example</title>
</head>
<body>
<form
id="form1"
runat="server">
<!--
<script
language="javascript" type="text/javascript"
src="jquery-1.2.6-vsdoc.js"></script>
-->
<script language="javascript"
type="text/javascript"
src="jquery.pack.js"></script>
<div>
<label for="lblOutput">
Text Out:
</label>
<div id="lblOutput" />
<script language="javascript"
type="text/javascript">
$(document).ready(function()
{
$.ajax({
type: "POST",
contentType:
"application/json;
charset=utf-8",
url: "GetData.asmx/ReturnData",
data: "{i: 47}",
dataType: "json",
success: function(msg) { onSuccess(msg);
},
error: function() {
alert("An error occurred on the
server.");
}
});
});
function onSuccess(msg) {
var newline = "<br
/>";
$('#lblOutput').html("Name: " + msg.d.Name + newline
+
"Notes: " + msg.d.Notes + newline
+
"Passed Value: " +
msg.d.PassedValue);
}
</script>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
type="text/javascript">
function pageLoad() {
GetData.ReturnData(47, onSuccess);
}
function onSuccess(result) {
var newline = "<br
/>";
$get('lblOutput').innerHTML = "Name: " + result.Name +
newline +
"Notes: " + result.Notes + newline
+
"Passed Value: " +
result.PassedValue;
}
</script>
</head>
<body>
<form
id="form1"
runat="server">
<label for="lblOutput">
Text Out:
</label>
<div
id="lblOutput"
/>
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
>
<Services>
<asp:ServiceReference
Path="~/jQuery/GetData.asmx" />
</Services>
</asp:ScriptManager>
</div>
</form>
</body>