Can't get div height when including javascript in Django template

Question

I'm trying to use the flot plugin for jquery and it keeps on complaining that a div has a width/height of zero. I'm actually including the javascript for this in a Django template. So my template file looks like:

<style>
#graph {
     width: 100px;
     height: 100px;
}
</style>
<script>
$.plot(stuff)
console.log($(#graph).width())
</script>
<div id="#graph">
</div>

This template code is inserted into the DOM of another page with AJAX.

$.ajax({
     url: 'something',
     success: function(data){ $("#content").html(data);
              console.log($("#graph").width()) }
});

For some reason, I can't get the width to be non-zero, but if I test the width in the "success" function from the ajax call, it returns correctly. Is something wrong with the order that commands are being run/placed into the DOM?

Answer 1

Well, in your first code block, you are checking the width of your DIV before you actually create the DIV in your markup, and sense you aren't using a DOMReady event or Window Loaded event, it will come up 0 or null at best.

So, if you just move your script block below the div in your first example that will fix that.

I imagine you will find a similar situation in your second example but I can't be sure without seeing more code.