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