Response title
This is preview!
XHR response using ajaxComplete
in Using jQuery
•
5 years ago
Hello,
I was looking over some of the jQuery docs and came across this one:
http://api.jquery.com/ajaxComplete/
So I built a localhost version and came up with this for the 'main' html file;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
</head>
<body>
<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>
<script>
$(document).ready(function()
{
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax.htm" );
});
});
$( document ).ajaxComplete(function( event, xhr, settings ) {
if ( settings.url === "ajax.htm" ) {
console.log(event);
console.log(xhr);
$( ".log" ).text( "Triggered ajaxComplete handler. The result is " + xhr.responseHTML );
}
});
</script>
</body>
</html>
I then built the ajax.htm file in the same directory as is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id='red'>red</div>
</body>
</html>
Everything works fine except when I try to output the
I was looking over some of the jQuery docs and came across this one:
http://api.jquery.com/ajaxComplete/
So I built a localhost version and came up with this for the 'main' html file;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
</head>
<body>
<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>
<script>
$(document).ready(function()
{
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax.htm" );
});
});
$( document ).ajaxComplete(function( event, xhr, settings ) {
if ( settings.url === "ajax.htm" ) {
console.log(event);
console.log(xhr);
$( ".log" ).text( "Triggered ajaxComplete handler. The result is " + xhr.responseHTML );
}
});
</script>
</body>
</html>
I then built the ajax.htm file in the same directory as is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id='red'>red</div>
</body>
</html>
Everything works fine except when I try to output the
xhr.responseHTML <---- This is undefined but this below existsxhr.responseText <-- this exists, the xhr object does exist just not thexhr.responseHTML ??
Anyone know why?
Jim
1