|
|
<%@ Page Language="C#" AutoEventWireup="true"
EnableViewState="false" CodeBehind="Default.aspx.cs"
Inherits="jQueryFiveAjaxCalls.Default" %>
<!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>Demo Code for 5 Ajax Calls Using jQuery</title>
<link rel="SHORTCUT ICON" href="Images/icon_tong.ico" />
<link href="Styles/AppStyles.css" rel="stylesheet" type="text/css" />
<script src="JS/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var $target = $("#MainContent");
var $resource = "StudentRecordArchive/StudentRecordsHTMLFragment.aspx";
var $jsresource = "JS/ExampleScript.js";
var $information = $("#lblInformation");
var $informationDefaultTextNotSelected =
"Please select the number of records to retrieve and click on one of the links above ...";
var $informationDefaultTextSelected =
"Please click on one of the links above ...";
var $ajax_load = "<img src='Images/ajax-loader.gif' alt='Loading ...'/>";
$.ajaxSetup({ cache: false });
$("#selNoOfStudentRecords").change(function() {
$target.html("");
if ($('#selNoOfStudentRecords').val() == "*") {
$(":button").attr("disabled", true);
$(":button").removeClass("ButtonStyle");
$(":button").addClass("ButtonDisabled");
$information.html($informationDefaultTextNotSelected);
} else {
$(":button").attr("disabled", false);
$(":button").removeClass("ButtonDisabled");
$(":button").addClass("ButtonStyle");
$information.html($informationDefaultTextSelected);
}
}).change();
$("a").hover(function() {
this.style.color = "red";
}, function() {
this.style.color = "";
});
$("#btnClear").click(function(e) {
e.preventDefault();
$target.html("");
$information.html($informationDefaultTextSelected);
});
$("#btnUseLoad").click(function(e) {
e.preventDefault();
var $nRecord = $('#selNoOfStudentRecords').val();
$target.html($ajax_load).load($resource, { NRECORD: $nRecord });
$information.html("Information retrieved by load method ...");
});
$("#btnUseGet").click(function(e) {
e.preventDefault();
var $nRecord = $('#selNoOfStudentRecords').val();
$target.html($ajax_load);
$.get($resource, { NRECORD: $nRecord }, function($x) {
$target.html($x);
$information.html("Information retrieved by get method ...");
});
});
$("#btnUsePost").click(function(e) {
e.preventDefault();
var $nRecord = $('#selNoOfStudentRecords').val();
$target.html($ajax_load);
$.post($resource, { NRECORD: $nRecord }, function($x) {
$target.html($x);
$information.html("Information retrieved by post method ...");
});
});
$("#btnUseGetJSON").click(function(e) {
e.preventDefault();
var $nRecord = $('#selNoOfStudentRecords').val();
$target.html($ajax_load);
$.getJSON($resource, { NRECORD: $nRecord, RETURNJSON: "True" }, function($x) {
$target.html($x.TB);
$information.html("Information retrieved by getJSON method ...");
});
});
$("#btnUseGetScript").click(function(e) {
e.preventDefault();
var $nRecord = $('#selNoOfStudentRecords').val();
$target.html($ajax_load);
$.getScript($jsresource, function() {
$.loadStudentHtmlFragment($target, $resource, { NRECORD: $nRecord });
$information.html("Information retrieved by getScript method and run this script ...");
});
});
});
</script>
</head>
<body>
<div>
<div class="AppTitle">A Working Example of the Five Ways to Make jQuery Ajax Calls</div>
<div class="AuthorTitle"><asp:Label ID="lblAuthorInformation" runat="server"></asp:Label></div>
<div>
<table style="width: 100%" cellpadding="0px" cellspacing="0px">
<tr>
<td style="white-space: nowrap" align="left">
<span>
<span>
<input type="button" id="btnUseLoad"
class="ButtonStyle" value="Call by load (...)" />
</span>
<span>
<input type="button" id="btnUseGet"
class="ButtonStyle" value="Call by get (...)" />
</span>
<span>
<input type="button" id="btnUsePost"
class="ButtonStyle" value="Call by post (...)" />
</span>
<span>
<input type="button" id="btnUseGetJSON"
class="ButtonStyle" value="Call by getJSON (...)" />
</span>
<span>
<input type="button" id="btnUseGetScript"
class="ButtonStyle" value="Call by getScript (...)" />
</span>
<span>
<input type="button" id="btnClear"
class="ButtonStyle" value="Clear" />
</span>
</span>
</td>
<td> </td>
<td style="white-space: nowrap">
<span style="float: right">
<span>
<span>Select the number of records to retrieve </span>
<span>
<select id="selNoOfStudentRecords" class="SmallText">
<option value="*">** Please select **</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</span>
</span>
</span>
</td>
</tr>
</table>
</div>
<div class="Information"><label id="lblInformation"></label></div>
<div id="MainContent" class="MainContent"></div>
<div class="Copyright">Copy right: The Code Project Open License (CPOL)</div>
</div>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I want to be your friend.
Submit an article or tip