Uncaught TypeError: Cannot read property 'ownerDocument' of undefined

44
votes

I'm teaching myself AJAX to AJAXify my site. In my template, I have the following JS code to get some JSON data from a view then append the data to a div.

function filter(type) {
  $.getJSON(
    '/activity_stream/global-activity-stream/', 
    {xhr: "true", filter: type}, 
    function(data) {
      $('.mainContent').children().remove();
      $(data).appendTo('.mainContent');
    });
  }

  $(".btn").click(function () { 
    filter("recent"); 
  });
}

I think my view is returning proper JSON but now data is not being added to the .mainContent div.

It gives this error:

Uncaught TypeError: Cannot read property 'ownerDocument' of undefined.

6
javascriptjquerydjangojson
If you're getting JSON back, then just appending it into the DOM isn't going to work. What do you expect to happen? – Pointy
I guess i expected it to load the data into the div...How can i achieve this? Am new to this AJAXy stuff... – Denny
Just change $('.mainContent').children().remove(); $(data).appendTo('.mainContent'); to $('.mainContent').html(data); The problem is, when you do appendTo, jquery expects the $(data) to be a dom node, which it is most likely not in this case – karthikr
Thanks,that helped with that error though now the returned JSON data aint being displayed in the div :-( – Denny
@karthikr that's just going to dump the raw JSON onto the page, but yes $('.mainContent').html(data); should show whatever came from the server (as just raw JSON text). (No need to remove the children before doing that.) You can use the browser debugging tools to check and see exactly what the server is returning. – Pointy

6 Answers

50
votes

Make sure you're passing a selector to jQuery, not some form of data:

$( '.my-selector' )

not:

$( [ 'my-data' ] )
19
votes

I had a similar issue. I was using jQuery.map but I forgot to use jQuery.map(...).get() at the end to work with a normal array.

3
votes

The same issue came up for me inside of $elms.each().

Because:

  1. the function you pass to .each(Function) exposes (at least) two arguments; the first being the index and the second being the element in the current element in the list, and
  2. because other similar looping methods give current the element in the array before the index

you may be tempted to do this:

$elms.each((item) => $(item).addClass('wrong'));

When this is what you need:

$elms.each((index, item) => $(item).addClass('wrong'));
3
votes

In case you are appending to the DOM, make sure the content is compatible:

modal.find ('div.modal-body').append (content) // check content
1
votes

If you use ES6 anon functions, it will conflict with $(this)

This works:

$('.dna-list').on('click', '.card', function(e) {
  console.log($(this));
});

This doesn't work:

$('.dna-list').on('click', '.card', (e) => {
  console.log($(this));
});
0
votes

In my case, this error happened because my HTML had a trailing linebreak.

var myHtml = '<p>\
    This should work.\
    But does not.\
</p>\
';

jQuery('.something').append(myHtml); // this causes the error

To avoid the error, you just need to trim the HTML.

jQuery('.something').append(jQuery.trim(myHtml)); // this works