Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

Question

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?

jsfiddle

Answer 1

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 the ownerDocument of object you pass with this when you execute $(this).html($link); but in your code the this is not a DOMElement, and does not have a ownerDocument. Because of that ownerDocument is undefined and thats the reason why createDocumentFragment is called on undefined.

You either need to use the context option for your ajax 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.

Answer 2

That error occur because this is referring to the ajax object and not on the DOM element, to solve this you can do something like this:

$('form').on('submit', function(){
    var thisForm = this;

    $.ajax({
        url: 'www.example.com',
        data: {}
    }).done(function(result){
        var _html = '<p class="message">' + result + '</p>';
        $(thisForm).find('#resultDiv').html(_html);
    });
});