Uncaught TypeError: Cannot read property 'ownerDocument' of undefined

Question

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.

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, Jul 11 '13 at 13:38
I guess i expected it to load the data into the div...How can i achieve this? Am new to this AJAXy stuff... — Denny, Jul 11 '13 at 13:46
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, Jul 11 '13 at 13:53
Thanks,that helped with that error though now the returned JSON data aint being displayed in the div :-( — Denny, Jul 11 '13 at 14:26
@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, Jul 11 '13 at 14:51
@Pointy - That is exactly what the OP is intending to do anyways. I agree JSON would have to be parsed — karthikr, Jul 11 '13 at 14:52
OP should look into JS templating. Underscore.js has an easy template system where you create the tmpl, pass in the json obj, and then add that to the DOM — b_dubb, Apr 26 '14 at 18:34

score 52 · Answer 1 · answered Oct 05 '13 at 20:55

52

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

$( '.my-selector' )

not:

$( [ 'my-data' ] )

answered Oct 05 '13 at 20:55

redolent

4,159
5
37
47

2

This was spot on for me. I thought the issue was with my jQuery functions but actually I was an array as opposed to my usual single obj. Thanks man – Solvision Apr 07 '18 at 12:46

score 19 · Answer 2 · answered Nov 23 '14 at 01:01

19

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.

answered Nov 23 '14 at 01:01

Overload119

5,124
5
29
34

score 4 · Answer 3 · answered Apr 07 '17 at 16:30

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

Because:

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

score 3 · Answer 4 · answered Aug 29 '18 at 17:36

3

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

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

answered Aug 29 '18 at 17:36

mehmet

7,720
5
42
48

score 2 · Answer 5 · answered Mar 11 '19 at 23:13

2

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

answered Mar 11 '19 at 23:13

Eddie

1,428
14
24

My situation, this was the correct answer. I keep forgetting that arrow functions bind their `this` to the closest regular function's `this`. – WolfieZero Jun 30 '21 at 10:08
If it is triggering, use the event like `e.currentTarget` or maybe it's `$(e.currentTarget)`. It should work the same as this while still allowing anon functions. – Eddie Jul 01 '21 at 17:56

score 0 · Answer 6 · answered Oct 22 '20 at 18:14

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

Uncaught TypeError: Cannot read property 'ownerDocument' of undefined

6 Answers6

Linked