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);
    });
});

Answer 3

That error occurs because this usually refers to the ajax object and not on the DOM element, to prevent this assign this in a variable like below:

/* To add add-on-test in cart */
$(document).on("click", ".aish_test", function(){
          var thisButton = this; //Like this assign variable to this
          var array_coming = '<?php echo json_encode($order_summary_array);?>'; //Json Encoding array intersect variable
          //Converting in array
          var array_check = $.parseJSON(array_coming);
          var result = [];

            for(var i in array_check){
                result.push(array_check [i]);
            }

          //Fetching data:
          var test_data_name = $(this).attr("data-name");
          var test_data_price = $(this).attr("data-price");
          var test_data_id = $(this).attr("data-id");
        
         if($.inArray(test_data_id, result) == -1)
            { 
            //static html 
            var static_html = '<tr><td>'+test_data_name+'</td>';
            static_html += '<td>&#163;'+test_data_price+'</td>';
            static_html += '<td><button type="button" class="close remove_add_test" data-id="'+test_data_id+'" data-price="'+test_data_price+'" aria-hidden="true"> <i class="fa fa-trash-o"></i> </button></td></tr>'; 
               /*ajax call*/
            $.ajax(
                    {
                        type: 'POST',
                        url: 'scripts/ajax/index.php',
                        data: {
                            method: 'addtocart',
                            id: test_data_id,
                            name: test_data_name,
                            price: test_data_price
                        },
                        dataType: 'json',
                        success: function(data) {
                            if (data.RESULT == 0) {
                                $(thisButton).text("added to cart"); //Use again like this
                                $(".cart-number").text(data.productcount);
                                $.growl.notice({
                                    title: "Shopping Cart",
                                    message: data.MSG
                                });
                            $('#myTable tr:first-child').after(static_html);
                            } else if (data.RESULT == 2) {
                                $.growl.error({
                                    title: "Shopping Cart",
                                    message: data.MSG
                                });
                            } else {
                                $.growl.error({
                                    title: "Shopping Cart",
                                    message: data.MSG
                                });
                            }
                        }
                    }); 
            }
            else
            {
                $.growl.error({
                                    title: "Shopping Cart",
                                    message: "Already in Cart"
                                });
            }
            
    });