CODEWITHSUNDEEP
javascriptpythondjango
Minsoo Jang
Minsoo Jang

Reputation: 3

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

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>

Upvotes: 0

Views: 441

Answers (2)

j_syk
j_syk

Reputation: 6621

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

Upvotes: 0

Scorpil
Scorpil

Reputation: 1526

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

Upvotes: 1

Related Questions