Menu
I just got started using React, so this is probably a very simple mistake, but here we go. My html code is very simple:
<!-- base.html --> <html> <head> <title>Note Cards</title> <script src="http://<url>/react-0.11.2.js"></script> <!-- <script src="http://<url>/JSXTransformer-0.11.2.js"></script> --> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> {% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}"> <script src="{% static "build/react.js" %}"></script> </head> <body> <h1 id="content">Note Cards</h1> <div class="gotcha"></div> </body> </html> Note that I am using Django's load static files here. (My JavaScript is a bit more complex, so I won't post it all here unless someone requests it.) This is the line with the error:
React.renderComponent( CardBox({url: "/cards/?format=json", pollInterval: 2000}), document.getElementById("content") ); After which I get the 'target container is not a DOM element error' yet it seems that document.getElementById("content") is almost certainly a DOM element.
I looked at this stackoverflow post, but it didn't seem to help in my situation.
Anyone have any idea why I'd be getting that error?
711
I figured it out!
After reading this blog post I realized that the placement of this line:
<script src="{% static "build/react.js" %}"></script> was wrong. That line needs to be the last line in the <body> section, right before the </body> tag. Moving the line down solves the problem.
My explanation for this is that react was looking for the id in between the <head> tags, instead of in the <body> tags. Because of this it couldn't find the content id, and thus it wasn't a real DOM element.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With