I am trying to grab a webpage and load into a bootstrap 2.3.2 popover. So far I have:
$.ajax({
type: "POST",
url: "AjaxUpdate/getHtml",
data: {
u: 'http://stackoverflow.com'
},
dataType: 'html',
error: function(jqXHR, textStatus, errorThrown) {
console.log('error');
console.log(jqXHR, textStatus, errorThrown);
}
}).done(function(html) {
console.log(' here is the html ' + html);
$link = $('<a href="myreference.html" data-html="true" data-bind="popover"'
+ ' data-content="' + html + '">');
console.log('$link', $link);
$(this).html($link);
// Trigger the popover to open
$link = $(this).find('a');
$link.popover("show");
When I activate this code I get the error:
Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined
What is the problem here and how can I fix it?
Best Answer
The reason for the error is the
$(this).html($link);
in your.done()
callback.this
in the callback refers to the[...]object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax)[...]
and not to the$(".btn.btn-navbar")
(Or whatever you expect where it should refer to).The error is thrown because jQuery will internally call
.createDocumentFragment()
on theownerDocument
of object you pass withthis
when you execute$(this).html($link);
but in your code thethis
is not a DOMElement, and does not have aownerDocument
. Because of thatownerDocument
isundefined
and thats the reason whycreateDocumentFragment
is called onundefined
.You either need to use the
context
option for yourajax
request. Or you need to save a reference to the DOMElement you want to change in a variable that you can access in the callback.