Django/Ajax - Executing javascript in a template received through ajax call

Question

In my application, I make an ajax call that renders this template with js:

<div id="ajax_reply">
<div id="hidden_data" style="display:none;"></div>
<script type="text/javascript">
var data = [];
data.push(['Col1', 'Col2', 'Col3', 'Col4']);
{% for entry in mydata %}
 var dCell = [];
 dCell.push({{ entry.Col1 }});
 dCell.push({{ entry.Col2 }});
 dCell.push({{ entry.Col3 }});
 dCell.push({{ entry.Col4 }});
 data.push(dCell);
{% endfor %}
document.getElementById('hidden_data').innerHTML = JSON.stringify(data);
</script>
</div>

This doesn't work, if I run the resulting js manually in console, it does get inserted into the div, but otherwise, the javascript is never executed. I've searched on SO but couldn't find questions on this exact topic. hidden_data is in scope, any suggestions?

EDIT: Code seen in console after wrapping in onload (I had to make a few edits but running this manually in console works)

<div id="ajax_reply">
<div id="hidden_data" style="display:none;"></div>
<script type="text/javascript">
window.onload = function() {
 var data = [];
 data.push(['Col1', 'Col2', 'Col3', 'Col4']);
 var dCell = [];
 dCell.push('1233');
 dCell.push('123312');
 dCell.push('1233');
 dCell.push('1482.61');
 data.push(relation);
 var dCell = [];
 dCell.push('1231');
 dCell.push('2112.0');
 dCell.push('1231');
 dCell.push('123123.00');
 data.push(relation);
 document.getElementById('hidden_data').innerHTML = JSON.stringify(relationsData);
};
</script>
</div>

• Scorpil: Can you show us JS as seen by the browser?
• Steven: What JavaScript code are you using to inject the HTML/JS returned by the ajax call into the DOM?
• Minsoo Jang: the return mimetype of a template is text/html, that includes js, I am not trying to do this in the context of the ajax call but the template itself. I think this question might get marked as irrelevant or not helpful, so I'd like to say this is a serious issue. I think the idea is that django renders the template but the js inside it is not executed as with a normal webpage in an ajax call. Plz correct me if this is wrong with a simple example.

Answer 1

If entry.Col1 contains string 'my text', resulting template will give you lines like this:

dCell.push(my text);

and, i suppose, you need

dCell.push('my text');

• j_syk: good catch. you can modify the fiddle from my answer and see that this messes it up. just need the quotes around the Django template variables.

Answer 2

Make sure that this is executing after the DOM is loaded.

Try wrapping your script like:

window.onload=function(){
 //script here
}

You can see on jsfiddle that this should be working.

Update:

It seems to be a problem with how Django is inserting data since it works with hardcoded sample data. Try the escapejs template filter to handle any potential javascript escaping problems. I've had to debug similar problems before with newlines and '&' symbols in particular.

dCell.push("{{ entry.Col1|escapejs }}");

• Minsoo Jang: i wrapped my code in window.onload but it still doesn't execute (with scorpil suggestion included) but it doesn't execute.
• j_syk: What does the data from Django look like? Depending on the characters used, you may need to escape the variables with the escapejs template filter. try {{ entry.Col1|escapejs }}
• Minsoo Jang: that's a valid point but it's not a reason for why js is not executing, if that was the case either 1) the template would throw an error or show blank (not data as its shown above), or 2) the js would show an error in console, the code is being displayed but never executed. I also don't have any special characters in my variables.