web-dev-qa-db-fra.com

Uncaught TypeError: Impossible de lire la propriété 'createDocumentFragment' of undefined

J'essaye de saisir une page Web et de la charger dans un bootstrap 2.3.2 popover. Jusqu'à présent, j'ai:

$.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");

Quand j'active ce code, j'obtiens l'erreur:

Uncaught TypeError: Impossible de lire la propriété 'createDocumentFragment' of undefined

Quel est le problème ici et comment puis-je le résoudre?

jsfiddle

javascriptjquerytwitter-bootstrap
53
user61629

La raison de l'erreur est la $(this).html($link); de votre rappel .done().

this dans le rappel renvoie à la fonction [...]object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax)[...] et non à la fonction $(".btn.btn-navbar") (ou à tout autre endroit auquel vous vous attendez).

L'erreur est renvoyée car jQuery appellera .createDocumentFragment() en interne sur l'objet ownerDocument de l'objet que vous passez avec this lorsque vous exécutez $(this).html($link); mais dans votre code this n'est pas un DOMElement et n'a pas de ownerDocument. A cause de cela, ownerDocument est undefined et c’est la raison pour laquelle createDocumentFragment est appelé sur undefined.

Vous devez soit utiliser l'option context pour votre requête ajax. Ou vous devez enregistrer une référence dans le DOMElement que vous souhaitez modifier dans une variable à laquelle vous pouvez accéder dans le rappel.

80
t.niese

Cette erreur se produit parce que this fait référence à l'objet ajax et non à l'élément DOM. Pour résoudre ceci, vous pouvez faire quelque chose comme ceci:

$('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);
    });
});
10
Kevin Felisilda