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>

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