javascript - bootstrap - Unkeught TypeError: no se puede leer la propiedad ''createDocumentFragment'' de undefined

bootstrap js

Question

Intento agarrar una página web y cargarla en un popover bootstrap 2.3.2. Hasta ahora tengo:

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

Cuando activo este código, obtengo el error:

Unkeught TypeError: no se puede leer la propiedad ''createDocumentFragment'' de undefined

¿Cuál es el problema aquí y cómo puedo solucionarlo?

jsfiddle

Answer 1

El motivo del error es $(this).html($link); en su devolución de llamada .done() .

this en la devolución de llamada hace referencia al [...]object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax)[...] y no a $(".btn.btn-navbar") (O lo que sea que espere a lo que debería referirse).

El error se produce porque jQuery llamará internamente a .createDocumentFragment() en el documento ownerDocument del objeto que pase con this cuando ejecute $(this).html($link); pero en su código, this no es un elemento DOME, y no tiene un ownerDocument . Debido a que ownerDocument undefined está undefined y es por eso que createDocumentFragment está llamado undefined .

O necesita usar la opción de context para su solicitud de ajax . O bien, debe guardar una referencia al elemento DOMElement que desea cambiar en una variable a la que puede acceder en la devolución de llamada.

Answer 2

Ese error ocurre porque this se refiere al objeto ajax y no al elemento DOM, para resolverlo puedes hacer algo como esto:

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