Suggested Videos
Part 52 - jquery floating div
Part 53 - jquery ajax load
Part 54 - jquery ajax load aspx page
In this video we will discuss the use of complete parameter of jquery load function.
Syntax
.load( url [, data ] [, complete ] )
complete parameter is a callback function that is executed when the request completes. The callback function has 3 parameters.
CallbackFunction(response, status, xhr)
In the following example, the anonymous function that is passed as the third parameter to the load function is executed when the AJAX request completes.
If you want the code in the callback function to execute only if these is an error, you can do so using status parameter as shown below.
Part 52 - jquery floating div
Part 53 - jquery ajax load
Part 54 - jquery ajax load aspx page
In this video we will discuss the use of complete parameter of jquery load function.
Syntax
.load( url [, data ] [, complete ] )
complete parameter is a callback function that is executed when the request completes. The callback function has 3 parameters.
CallbackFunction(response, status, xhr)
In the following example, the anonymous function that is passed as the third parameter to the load function is executed when the AJAX request completes.
<html>
<head>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var textBoxes = $('input[type="text"]');
textBoxes.focus(function () {
var helpDiv = $(this).attr('id');
$('#' + helpDiv + 'HelpDiv').load('GetHelpText.aspx', {
HelpTextKey: helpDiv },
function (response, status,
xhr) {
var errorMessage = 'status : ' +
xhr.status + '<br/>';
errorMessage += 'status text : ' +
xhr.statusText + '<br/>';
errorMessage += 'response : ' +
response;
$('#divError').html(errorMessage);
});
});
textBoxes.blur(function () {
var helpDiv = $(this).attr('id') + 'HelpDiv';
$('#' + helpDiv).html('');
});
});
</script>
</head>
<body style="font-family:Arial">
<table>
<tr>
<td>First Name</td>
<td><input id="firstName" type="text" /></td>
<td><div id="firstNameHelpDiv"></div></td>
</tr>
<tr>
<td>Last Name</td>
<td><input id="lastName" type="text" /></td>
<td><div id="lastNameHelpDiv"></div></td>
</tr>
<tr>
<td>Email</td>
<td><input id="email" type="text" /></td>
<td><div id="emailHelpDiv"></div></td>
</tr>
<tr>
<td>Income</td>
<td><input id="income" type="text" /></td>
<td><div id="incomeHelpDiv"></div></td>
</tr>
</table>
<br />
<div id="divError"></div>
</body>
</html>
If you want the code in the callback function to execute only if these is an error, you can do so using status parameter as shown below.
$('#' + helpDiv + 'HelpDiv').load('GetHelpText.aspx', {
HelpTextKey: helpDiv },
function (response, status, xhr) {
if (status == 'error') {
var errorMessage = 'status
: ' + xhr.status + '<br/>';
errorMessage += 'status text : ' +
xhr.statusText + '<br/>';
errorMessage += 'response : ' +
response;
$('#divError').html(errorMessage);
}
});
hi first cannot thank u enough for your wonderful work
ReplyDeletewhen i use textBoxes.focus(function () {
i got endless calls to GetHelpText.aspx
my guess cause the load trigger the focus event
when i use $(textBoxes).on("focus", function () {
it work fine
doron